Transition or Animation: Which One Should You Use?
- 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.
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.
Unfortunately, none of these similarities is a good criterion to choose animations over transitions or transitions over animations. Let’s consider the differences instead.