A Note about Performance in CSS

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.

Leave a Reply

Your email address will not be published. Required fields are marked *