Cagematch: CSS Animations VS Transitions

When should you use CSS Animations and when should you use CSS Transitions? First, let's get some examples going so that we'll get an intuitive feel for the difference.

CSS Transitions

Take a second to look at the examples in the video:

 

If you notice, transitions are generally:

  • Simple. Transitions are animations. But you don't have much control over what happens in the animation, and you can't specify how the animation is done. All you can change is the duration, timing function, and delay. But don't let that stop you! As you can see in the video, you can do a lot with it. A metric shit-ton of things, in fact. You can change an element's size, color, opacity, font—you name it! If it's animatable, you can apply a transition to it.

  • Triggered. Since transitions only apply to CSS properties that changed, you need some sort of way to actually change the property. This can happen in a lot of ways, and clicking, hovering, and scrolling are just a few ways of doing it.

CSS Animations

Here are some examples of animations that I found around the web:

 

So in this video, you'll notice that animations are generally:

  • Looping. They are often used as loading screens or tiny indicator icons that play over and over again.

  • Used to create complex movements. With transitions, you can change the CSS properties once in the duration of the animation, but with CSS Animations, you get more control: You can change the properties at different times in the duration of the animation.

  • Trigger-free. Notice in the video that most of the animations were playing right away after loading. There was no need to do any hovering or clicking or anything. It just does its thing.

So! To summarize: A good rule of thumb is to use CSS Transitions for quick, simple, one-off animations, and CSS Animations if you want fine-grained control over the animation or if you want to loop it.

Of course, don't take this as gospel! Use your own judgement when applying either one. Also, what I have are generalizations which are made to simplify things. The real thing can be more subtle. For example:

  • CSS Transitions can be made to loop. You'd need JavaScript to do that.

  • CSS Animations aren't necessarily trigger-free. If you look at Animate.css, the animations are triggered by a click. Check out this video if you're interested in using Animate.css with JQuery.

  • CSS Animations don't have to be complex. They can be just as simple as a transition.

If you find anything confusing or if you have any questions, send me an e-mail.

Resources:

Did you enjoy this article? Don't miss my next post!

Comments