- 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
How to Create More Performant Transitions and Animations
While it may not matter whether you choose transitions or animations where performance is concerned, you should be thinking about performance when working with either. That means choosing translation, scale, rotation, opacity, and CSS filters where possible. It doesn’t mean you can’t or shouldn’t animate other CSS properties. However, if you have the choice, you should use one of these five properties instead of another property.
For example, say you want to move an element from one location to another. You can use translate(), translateX(), or translateY() to move it across the screen or you could adjust the values for top, right, bottom, and left to move the element.
The translate method is the more performant method. It doesn’t require layout or painting changes. It only requires changes that the compositor thread can handle. An element that animates through translation should run smoother than if that element were animated through adjustments to ’its position.
View one of my demos. The demo contains two-block animating across the screen. Both use animation keyframes, but one block adjusts the blocks top and left position, while the other uses the translate function.
Similarly, instead of changing an element’s width or height (both require layout changes), you’d be better off using a scale transform, which only requires compositing changes.
Paul Lewis maintains a list of CSS triggers that shows which property changes affect the layout, paint, or composite layers. When you can create the same animated effect with different sets of properties, you can refer to the list to see which rendering layers each property change will affect.