Optimizing CSS animations

Animating well is core to a great web experience. You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and may lead to skipped frames. Declarative animations are preferable to imperative since the browser has the opportunity to optimize ahead of time. Basic List of Animatable Properties: CSS animations - Animatable Examples of Each Property Animated:

Explore and see cool things that are possible with CSS animations! High Performance CSS Animations

When designing animation for interaction, it’s important to consider that variables do change based on user input. The most common variable that requires flexibility is the animation-duration() — this is the amount of time that the animation takes to complete.

Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk. High Performance CSS Animations

Imperative vs Declarative Animations

Developers often have to decide if they will animate with JavaScript (imperative) or CSS (declarative). There are pros and cons to each, so let’s take a look: Imperative

The main pro of imperative animations happens to also be its main con: it’s running in JavaScript on the browser’s main thread. The main thread is already busy with other JavaScript, style calculations, layout and painting. Often there is thread contention. This substantially increases the chance of missing animation frames, which is the very last thing you want.

Animating in JavaScript does give you a lot of control: starting, pausing, reversing, interrupting and cancelling are trivial. Some effects, like parallax scrolling, can only be achieved in JavaScript. Declarative

The alternative approach is to write your transitions and animations in CSS. The primary advantage is that the browser can optimize the animation. It can create layers if necessary, and run some operations off the main thread which, as you have seen, is a good thing. The major con of CSS animations for many is that they lack the expressive power of JavaScript animations. It is very difficult to combine animations in a meaningful way, which means authoring animations gets complex and error-prone. Resources

  The current status of animated properties on the web.
Paul Irish’s deck on performance tooling.
Antialiasing 101
We’re Gonna Need A Bigger API!


1,242 0 1