The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation.

This property has four values:

  • auto: standard browser optimizations will be applied.
  • scroll-position: indicates that the element’s scroll position will be animated sometime in the near future so the browser will prepare for content which is not visible in the scroll window of an element.
  • contents: the contents of an element is expected to change so the browser will not cache this element’s content.
  • <custom-ident>: any user-defined property such as transform or opacity that we want will-change to be applied to.

We can inform the browser that a change is about to take place to the transform property like so:

.element {
  will-change: transform;

Or if we want to declare multiple values we can use a comma-separated list such as:

.element {
  will-change: transform, opacity;

It's important not to overuse the will-change property however since it might, in fact, cause the page to be less performant (note that there is not an all value for this property for a good reason). Instead, it's recommended to toggle on will-change just before an element or property changes and then toggle it off again shortly after the process is finished.

Other resources

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox


  1. User Avatar
    Anonymous Thank-You

    Thanks mate; helpful article.

  2. User Avatar
    Permalink to comment#

    So…is there any indication that this is still a thing, and actually helps performance?

  3. User Avatar
    Giovanni Panariello
    Permalink to comment#

    I’m developing some animations using CSS, and there are some points were more than one of them start at the same time, letting the whole thing to be not very smooth. So I was looking for something to help about this issue, and I landed on this article.
    I have tried to use this rule, but unfortunately it doesn’t seem to improve the animation flow.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.