- Similarities Between Transitions and Animations
- Differences Between Transitions and Animations
- Choosing Transitions or Animations
- Performance
- How to Create More Performant Transitions and Animations
- When Transitions Can Be Less Performant than CSS Animations
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
When Transitions Can Be Less Performant than CSS Animations
There is one place where a transition can be less performant than its equivalent CSS animation. It’s in how you define the property to be transitioned.
You can explicitly set the specific elements that will be transitioned as in transition: background-color or transition: opacity. You can also set transition: all to target change for all animatable properties.
Browsers have to listen for every possible change so transition: all requires the browser to do more work. Instead of listening for changes to background-color or opacity only, it needs to listen for changes to all the animatable CSS properties.
CSS animations don’t have the same issue. Because of the way animations start, stop, and pause, the browser doesn’t need to always be listening for the changes.
The takeaway is when you work with transitions, stay away from transition: all and only transition the specific properties you want to transition.