Amazing animations with CSS

Consider the following scenario:

First let’s take a look at the GIF below, which shows George running through the pigeon causing it to soar. How can we simulate this effect?

If you look at these pigeons, there aren’t many of them, but they all fly alone.

Instead of controlling one set of animations at a time, we recreate this effect by stagging the animations. As the animation delay for each item increases, they behave as if they were individuals, but still move correctly as a whole. The result feels more glamorous and real.

My recently released Isotope V3 project uses this approach:

While each transition is easy to set up, it can be difficult to manage. Running the animation at different intervals can get very complicated. So let’s discuss how to stagger each transition more effectively.

In the example we used a simple animation: move a group of items horizontally. Each item has a CSS transition: Transform 0.4s, and they move by switching the.IS-Moved class. Here is the first example of all items moving together:

setTimeout

We can use setTimeout to stagger the transition. In JavaScript, setTimeout will start the transition after a delay.

This looks pretty good already. But I want to tweak the animation a little bit, and I want everything to move without overlapping. That is, if you move to the right, the item on the right starts moving first; If moving to the left, the item on the left should start moving first. So we need to reverse the setTimeout delay when moving to the right.

That looks good, so let’s test this animation a little: what happens if you switch the direction of movement during the animation? This edge case is often overlooked. Any new developer can add animations. However, if you care about your users, your animations should react as soon as they do something. Animations should not interfere with the user’s actions.

Click the button during the transition to see what happens:

It seems to work. Everything stops where it should. But I don’t like them in their present form. It looks like everything is confusing. Let’s also try this on an example without reversing the setTimeout delay:

Forward/reverse transitions continued through all projects. This is not what we want. The user has changed their actions, but the animation is still happening.

transition-delay

There are other things we can try. Now that we’re using CSS transition, it’s natural to use transition-delay. The following example uses JavaScript to set incremental transition-delay (you can also do this using CSS preprocessing logic). For all projects, the transition time is the same, but the delay time varies according to the value of transition-delay.

We can also reverse the delay to achieve the same left-right movement effect as in the setTimeout example:

When clicking the button during transition, the forward/reverse transition immediately stops:

This method works, but it’s not what we want.

Frame-based animation

There is another way to try: frame-based animation. Using requestAnimationFrame, we can control each transition as it is triggered.

The effect is perfect! Switch the direction of movement during the transition, the original transition will immediately stop and reverse transition, no delay and no extra transition action. But we can only sacrifice complexity to achieve this perfect result. This example requires twice as much JavaScript code, with an animation loop that runs every frame.

conclusion

So if you need to stagger animations, you have these options to achieve the effect you want:

• setTimeoutB: Yes, but it’s hard to cancel.
• transition-delayB: Yes, but there may be a delay.
• requestAnimationFrameYes, but you need more JavaScript.

There are many other options: ANIMATIONS with CSS,jQuery. Animate (), GreenSock, D3, and more. All of these schemes can be used to stagger animations, but I would recommend that you study how they react when the user does something during the animation.

For Isotope, I used transition-delay. It provides the best control without being too complex.

This article is based on the Staggering translation of @David DeSandro’s “Animations”. The entire translation is filled with our own understanding and thoughts. We can refer to our colleagues for guidance if we can’t translate well or find something wrong. css-tricks.com/staggering-… .

Graduate student, major in computer related. A girl who loves reading and writing, loves the front end and enjoys growing up. Favorite sentence: would rather die, do not live in silence.

If you want to reprint, please indicate the source: www.w3cplus.com/animation/s…