|

Getting started with the Web Animation API

An effective way to make user interfaces more attractive and understandable is to animate elements. Whether buttons, form fields or graphics - there are no limits to creativity. Many web developers rely on CSS animations at this point. But what some do not know: CSS Animations are based on the so-called Web Animations API (WAAPI for short).

This interface gives us developers the ability to directly access the browser's animation engine using JavaScript. In this article, we'll look at some useful features and extensions to the <element> class around the WAAPI.

Contrast - CSS vs JS

In order to have a better entry into the JavaScript variant later, we first look at the known way via CSS. CSS animations allow us to animate transitions from one CSS rule to another. Animations consist of two components.

  • A style describing our CSS animation (animation)
  • and a set of keyframes indicating the beginning and ending states of the animation's style and possible intermediate waypoints (@keyframes)

Example as a shorthand:

.cube {
    animation: over 3s ease-in 1s infinite reverse both running;
}

@keyframes about {
    ...
}

The animation rule has some properties. Here is the complete listing.

Property Description
animation-name The mapping to defined keyframes
animation-duration The duration of the animation
animation-timing-function The timing of the movement
animation-delay The delay
animation-iteration-count The number of iterations
animation-direction The direction
animation-fill-mode The fill mode
animation-play-state The current state (active / paused)

See the Pen CSS Animation by Florian Gaa (@bitbruder) on CodePen.

Careful! We will now enter the JavaScript world. If you want to learn more about CSS Animations, I recommend the great MDN article on CSS Animations.

Our first animation using the Web Animations API

If you take a closer look at the upcoming CodePen, you will see that we see a few old friends again:

  • The animation properties known from CSS can be found in an AnimationEffectTimingProperties object.
  • Our @keyframes are in a KeyframeEffects array.

See the Pen WAAPI Animation by Florian Gaa (@bitbruder) on CodePen.

Many will now ask themselves the following question: Couldn't I do this with jQuery all along? no! jQuery comes with its own animate() function](http://api.jquery.com/animate/), but this is not hardware accelerated and does not rely on the browser's own animation engine. This can severely affect the performance of our animation.

As is so often the case, jQuery's API design certainly had an impact on the official WAAPI.

Very powerful: Access to animation timeline

Up to this point we have only created a simple animation that we can also implement with CSS. A real power of the Web Animation API are functions that allow us to access and manipulate the timeline of our animation.

In the following CodePen we use functions like play(), pause() or reverse() to control our animation via user input.

See the Pen WAAPI Playback Control by Florian Gaa (@bitbruder) on CodePen.

Slowmo and Fast Forward: Adjust playback rate

With playbackRate we can control the playback speed of our animation. This allows our users to adjust the speeds of our animations themselves in the user interface. A great way to make the web less accessible!

See the Pen WAAPI PlaybackRate by Florian Gaa (@bitbruder) on CodePen.

Browser support

Information about the current native browser support - can be retrofitted via Polyfill (and thus runs in all browsers)!

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