Thursday, May 23, 2024
HomeCSSFast Tip: Unfavourable Animation Delay

Fast Tip: Unfavourable Animation Delay

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.

<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>
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.

The word “bouncing” animated letter by letter
With a optimistic delay, the looping animation begins with the primary character. The final characters aren’t animated but.

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;
The word “bouncing” animated letter by letter
With a adverse delay, all of the characters are animating immediately.

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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments