Right here’s a tiny CSS tip for making staggered animations really feel waaaay extra pure: Unfavourable animation delay. I’ve seen this concept shared by grasp CSS animators Jhey and Amit on separate events, and it’s such a neat little trick that it’s value recording right here!
Let’s say we’ve got a gaggle of components, and we would like them to animate in activate a loop — corresponding to this wavy textual content instance. We’re calculating the animation-delay worth them utilizing a customized property similar to the ingredient’s index.
<h1>
<span fashion="--i: 0">B</span>
<span fashion="--i: 1">O</span>
<span fashion="--i: 2">U</span>
<span fashion="--i: 3">N</span>
<span fashion="--i: 4">C</span>
<span fashion="--i: 5">I</span>
<span fashion="--i: 6">N</span>
<span fashion="--i: 7">G</span>
</h1>span {
--delay: calc(var(--i) * 200ms);
animation: bounce 500ms var(--delay, 0) infinite;
}Right here I’m setting that within the HTML, however we might use Splitting.js, a library that handles assigning customized properties for us (which allows a complete lot of cool textual content results and extra — I’ve written about it on this weblog earlier than).
Right here’s the demo with a daily, optimistic animation delay. You’ll discover that on the primary iteration of the animation, every letter begins from a standing begin.
Now, if we as an alternative calculate a adverse delay (utilizing -200ms as an alternative of 200ms), we’ll see the animation behave as if it’s already in progress — we gained’t be ready for the final ingredient to lastly animate as soon as all the others have performed so. Pretty!
span {
--delay: calc(var(--i) * -200ms);
animation: bounce 500ms var(--delay, 0) infinite;
}
Strive commenting out the --stagger customized property on this demo to see the distinction.
See the Pen
Bouncing letters by Michelle Barker (@michellebarker)
on CodePen.
