Article Description

CSS animations and transitions can be used to create a variety of effects on websites. In fact, you can usually create any effect from either a transition of animation. Steven Bradley helps you decide which one should you choose and why.

From the author of

CSS animations and transitions can be used to create a variety of effects on websites. For example, with transitions or CSS animations and without JavaScript, you can:

Create a menu that slides in from off the screen when a button is clicked.

Change the background color of a form element when it receives focus.

Open a modal window by scaling it up from a thumbnail.

Any of the above (and many more animating effects) can be created using either transitions or CSS animations. If you can use either, how do you decide which is the right one to use?

To answer, let’s first consider the similarities and differences between transitions and animations. We’ll weigh the pros and cons to see if that helps us make a choice. Then we’ll look at performance as a possible guide for choosing one over the other.

NOTE

This article assumes you know how to create both transitions and animations using HTML and CSS. If the subject is new to you, I’ve written tutorials about both transitions and CSS animations that will get you up to speed quickly. For a more detailed look, might I recommend my book CSS Animations and Transitions for the Modern Web.

Similarities Between Transitions and Animations

One of the first things you might notice when working with transitions and animations is they both have a number of similar properties. Transitions have properties for the name of the property, the duration of the transition, any delay set, as well as a handful of timing functions. Animations have these same properties, albeit as animation instead of transition.

Both animations and transitions can listen for changes to CSS property values, and both can interact with JavaScript events. CSS triggering events such as those listed below can be used to make changes in CSS properties that start either a transition or animation.

:hover

:link

:active

:visited

:focus

:checked

:disabled

You can also start both through property changes inside media queries, and both transitions and CSS animations respond to class changes via JavaScript.

Unfortunately, none of these similarities is a good criterion to choose animations over transitions or transitions over animations. Let’s consider the differences instead.