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:
- block-size
- border-width (and border-*-width properties)
- border (and border-* properties)
- bottom
- font-size
- font-weight
- height
- inset-block (and inset-block-* ) longhand properties
- inset-inline (and inset-inline-* ) longhand properties
- inline-size
- left
- line-height
- margin (and margin-* properties)
- min-height
- min-width
- max-height
- max-width
- padding (and padding-* properties)
- right
- top
- vertical-align
- width
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:
[id=menu] {
left: -300px;
transition: left 500ms ease-in;
}
[id=menu].open {
left: 0;
}
We could rewrite this using a translation transform:
[id=menu] {
transform: translateX( -300px );
transition: transform 500ms ease-in;
}
[id=menu].open {
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:
header {
perspective: 400px;
perspective-origin: 50% 50%;
}
[id=megamenu] {
width: 100vw;
height: 100vh;
transform: rotateX( -90deg );
transform-origin: 50% 0;
transition: transform 1s;
will-change: transform;
}
[id=megamenu].open {
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
- background-image
- background-position
- background-repeat
- background-size
- border-radius
- border-style
- box-shadow
- color
- outline
- outLine-coLor
- outLine-styLe
- outline-width
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.