Some properties create better-performing transitions and animations than others. If an animation updates a property that triggers a reflow or repaint, it may perform poorly on low- powered devices such a phones and tablets.
Properties that trigger a reflow are ones that affect layout. These include the following animatable properties:
- border-width (and border-*-width properties)
- border (and border-* properties)
- inset-block (and inset-block-* ) longhand properties
- inset-inline (and inset-inline-* ) longhand properties
- margin (and margin-* properties)
- padding (and padding-* properties)
When these properties are animated, the browser must recalculate the size and position of the affected—and often neighboring-elements. Use transforms where you can. Transitioning or animating translation transforms can replace top , left , right , and bottom or inset- block-* and inset-inline-* properties. Take, for example, the animation below that reveals a menu:
transition: left 500ms ease-in;
We could rewrite this using a translation transform:
transform: translateX( -300px );
transition: transform 500ms ease-in;
transform: translateX( 0 );
Browsers calculate and apply transforms after they calculate the document’s layout. As a result, transforms tend to be smoother, and less resource-intensive. We’ll cover transforms in Chapter 8.
Animations that take up a lot of screen real estate or that contain a lot of child elements may also perform poorly. In such cases, try adding the will-change property to an element:
perspective-origin: 50% 50%;
transform: rotateX( -90deg );
transform-origin: 50% 0;
transition: transform 1s;
transform: rotateX( 0deg );
The wiLL-change property indicates to the browser that an element will change soon. Set its value to the value of the property you plan to animate. Be careful with wiLL-change , however. It’s best used for a single element, and only after you’ve determined that a particular animation or transition doesn’t perform well. Consider it a property of last resort.
Properties that trigger a repaint are typically those that cause a color change. These include:
- I background
Changes to these properties are less expensive to calculate than those that affect layout, but they do still have a cost. Changes to box-shadow and border-radius are especially expensive to calculate, especially for low-powered devices. Use caution when animating these properties.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.