Transition or Animation: Which One Should You Use?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
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.