CSS Click Chart

Will Change

Lets you to inform the browser which elements and what properties will change, which allows the browser to optimize animations.

Specification

CSS Will Change Module Level 1 on W3C

Example Code

.parent:hover .child {
  will-change: transform;
}

.child {
  transition: transform 0.3s;
}

.child:hover {
  transform: scale(1.5);
}

Live Demonstration

When the user enters the parent element below, it will pre-optimize the coming animation (on hover) on the child element.

Browser Support

Can I Use will-change? Data on support for the will-change feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles