Widely available Supported across all major browsers. Safe to use in production.

will-change

The will-change CSS property enables optimizing animations by providing a rendering hint to a browser about how an element is expected to change.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
will-change
36
79
36
9.1
36
9.3
auto
36
79
36
9.1
36
9.3
contents
36
79
36
9.1
36
9.3
scroll-position
36
79
36
9.1
36
9.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Optimize hover animations */
.card:hover {
  will-change: transform;
}

.card:active {
  transform: scale(0.98);
}

/* Apply and remove dynamically via JS */
.animating {
  will-change: transform, opacity;
}

Live demo

Transform Optimization

will-change Transform optimization demo.

PreviewFullscreen

Opacity Optimization

will-change Opacity optimization demo.

PreviewFullscreen

Auto(default)

will-change Auto(default) demo.

PreviewFullscreen

Use cases

  • Using will-change

    The will-change CSS property enables optimizing animations by providing a rendering hint to a browser about how an element is expected to change.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links