Home / Articles / Transition or Animation: Which One Should You Use?

Transition or Animation: Which One Should You Use?

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.

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.