Say you have a @keyframe animation that animates an element all the way across the screen. From off the left edge to off the right edge. You apply it to multiple elements. But you don’t want all the elements to start at the same exact position.
You can change the animation-delay
so that they start at different times, but they will still all start at the same place.
Fortunately, there is a way.
The trick is to use negative animation-delay
. That will begin an animation right away, but as if part of the animation has run already.
For instance, here’s three elements:
<div class="thing thing-1"></div>
<div class="thing thing-2"></div>
<div class="thing thing-3"></div>
They are 300px wide. We’re going to animate them all the way across the screen:
@keyframes moveAcross {
0% {
left: -300px;
}
100% {
left: 100%;
}
}
They all use this animation, meaning they would all start at the same place:
.thing {
width: 300px;
position: absolute;
top: 0;
left: 0;
animation: moveAcross 10s linear infinite;
}

To change them to start at different place along the keyframe timeline, we apply those negative delays:
.thing-1 {
animation-delay: -1s;
}
.thing-2 {
animation-delay: -2s;
}
.thing-3 {
animation-delay: -3s;
}
Another little trick: to test those starting positions, just stop the animation (you’ll essentially just be seeing the first frame):
.car {
...
animation-play-state: paused;
}


This probably comes in most useful with really slow animations where a straight delay would result in nothing or the wrong thing being shown too long.
For fun, different durations as well:
See the Pen hjbKp by Chris Coyier (@chriscoyier) on CodePen.
I think this is a cool trick but would you consider this a good way to handle trying to create such timing/positioning for animations or possibly just adjust the starting position for each with delays? Don’t care either way here just wondering your thoughts.
Cool :-)
Another complicated example of
animation-delay
→ hxxp://cssdeck.com/labs/full/css3-animated-typographyOMG! This is so awesome! Definitely worth exploring more in detail! ;)
If you want them to be Ferrari, use replace the keyframes with the below ones. :D :D :D :P
@keyframes moveAcross {
0% {
left: -30000px;
}
100% {
left: 110%;
}
}
I don’t know, it’s not working in Chrome. That’s weird. @chris, can you tell me how to increase the speed if the above method is not working for some reason?
Awesome animation trick. You are doing a good job. Thanks for sharing.
Funny. I just made a pen the other week demonstrating this exact thing.
I was using it to make a CSS powered loading spinner.
Looks like it’s working everywhere. Great stuff!
Awesome!
Please, please, PLEASE do not use
left
for animation.I have some information about that here: https://css-tricks.com/tale-of-animation-performance/
But careful, this has that dogmatic feel to it. The alternative, translateX, is relative to itself not the relative parent, so it’s hard to animate something exactly across that distance, for example, if you don’t know what that distance is.
While useful info, the perf situation is really not as gray as that article implies. Animating with
left
will always be janky on mobile (this statement may not apply if your smartphone has a CPU from the far future).True, if you’re using percentage values. This is a good argument against using CSS Animations for something so dynamic (I would go for CSS Transitions+JS). In my opinion, performance trumps all of that.
what should I do again , I’m confused , can provide input master I become like a master , sorry if I am wrong to speak , because I am not good at speaking English
I am totally amazed with the animation you made sir. I want to make a moving cloud animation for my blog. Can I make it ?