|
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
animationproperties known from CSS can be found in anAnimationEffectTimingPropertiesobject. - Our
@keyframesare in aKeyframeEffectsarray.
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)!