High Performance CSS Animation
Everyone is using CSS animation in their mobile web app these days, many are not doing properly and cause the performance issues that negatively impact user experiences.
Not every CSS properties are free to animate, some properties are cheaper to animate than others, while some properties such as animating page’s element / layout size are particularly expensive.
Ensuring your page’s animation running at 60fps (frame per second) is the key to a silky smooth animation. When an animation begins to run, the browser executes your script and start to figures out what it need to paint and composite on the screen. So it is important to know how browser handles animation in order to optimize your script.
When you view your page’s animation using Chrome Dev Tool timeline, you should see something like this:
There are 4 major steps browser took to execute your animation during the rendering pipeline: Recalculate Style, Layout, Paint & Composite.
Image source: developers.google.com
1. Recalculate Style
Once the browser receives a function calls, it will starts to recalculates the styles, attributes or classes for the element that might have to changed.
2. Layout
The browser then generate the geometry and the position of all affected elements. If you change one element, the position and size of other elements may need need to recalculate too.
3. Paint
Then the browser triggers painting operation to draw all of the elements with their new calculated styles onto the layers.
4. Composite
Once the browser has all of the elements drawn onto layers, it composites the layers onto the screen.
It is important to understand exactly what part of the rendering pipeline that your code triggers. If you animate your element by changing the size of an element such as width & height, the browser will go through recalculate style, layout, paint & composite.
While, if your CSS property change an element’s background image, the browser can skip the steps of recalculating the style and and layout. Instead, it only requires to do the paint & composite.
There are few CSS property that don’t requires the browser to go through the pipeline of recalculate style, layout & paint:
- opacity
- z-index
- transform
Here is the great source for you to learn about which CSS properties triggers recalculate style, layout, paint & composite.
High Performant Animation with CSS Transform
The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Animating with transform property doesn’t requires layout or paint & the browser can hand off to the GPU & your animation more likely to hit 60 fps.
Here is the 2 examples we used to compare the performance of CSS animation:
- 1. Animate with position:absolute & top / right / left / bottom properties (by Paul Irish)
- 2. Animate with transform:translate (by Paul Irish)
If you run DevTool’s Timeline Frames mode & FPS counter on the 2 examples above, they start to tell you the result:
Result of animate with position:absolute & top / right / left / bottom
The result shows us that, animate with position:absolute & top / right / left / bottom causes long frame and the animation is running below 60fps.
Result of animate with transform:translate
Animating with transform:translate delivers silky smooth animation that runs at 60fps
Conclusion
Not every CSS properties are free to use for creating smooth animation. Try to avoid animate an element by modifying its width, height, padding, margin or any property that requires browser to go through the pipeline of recalculate style, layout & paint. Instead, you should always accomplish the same animation using opacity, z-index & transform properties where possible.
