CSS

How to optimize CSS animation with the will-change property

If you have done many animations using pure CSS you have probably noticed a small flicker that happens when an element is animated, you may even have used a hack to stop that from happening.

Happily hacks are no longer needed, we a have a new CSS property to help us deal with heavy animations and transitions.

Why does the flicker happen?

When you execute an animation, the animation is performed using the browser’s software rendering engine which is usually much slower than your computers GPU (Graphics Processing Unit). That’s why sometimes, even if you can play top games on your computer, you’ll still notice some flicker when viewing heavily CSS animated websites.

The problem also varies from browser to browser being a little inconsistent.

Browser support for will-change

At the time of writing only nightly versions of Chrome, Opera and Firefox support this property but as we can see by the number of nightly browsers supporting the property it probably won’t be long until we see it shipped to stable versions of browsers.

The will-change property

This new property allows you to notify the user’s browser what changes to an element you will be making so that the browser can better optimize itself before you actually transform the element. This makes the flicker disappear and page more responsive to a user’s movements and actions

This will also allow the browser to act in a more informed way driving resources when they are needed, creating layers for 3D transforms before you need them, and making your animations much smoother on the client-side.

Let’s say you want a certain element to do a 3D transform like rotate when you hover over it. Before the element is animated, add this:

will-change: transform; 

Of course, if you are planning to change more than one CSS propriety you can also add more by separating them with commas like so:

will-change: transform, top;

This should of course be used with caution to ensure the browser doesn’t optimize resources where they’re not needed. For example, you should never use something like this:

* {
    will-change: all;
} 

Possible values

The will-change property has several possible values:

  • Auto – this merely tells the browser to not change anything and keep optimizing like it was.
  • scroll-position – this value indicates that the element targeted will change its scroll position.
  • contents – by adding this value you are letting the browser know that the contents of that element will change in the future.
  • – This value can be the name of one or more properties you expect to change in this element, like opacity or transform.

Conclusion

CSS3 introduced a lot of cool effects, but it didn’t take account of the hardware limitations that we live with. The will-change property is a great step towards correcting that mistake.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress