A small ivory statuette of a whirling dervish set on blue cloth

CSS animations are relatively straightforward to write and highly performant, but they are also declarative: designers must say exactly what they want to happen, and movement happens the same way every time. Traditional JavaScript animation code is significantly more challenging to write, but has the benefit of integrating chance, variability, randomness, and a far stronger support for interactivity.

The Web Animations API seeks to be the bridge between CSS and JavaScript animation, merging the familiar syntax and performance of CSS with the power of JavaScript. As a new specification, the Web Animations API’s browser support is still progressing; as a result this reading list concentrates on demos, examples, and tutorials, rather than an exhaustive approach to syntax.

Time: 90 minutes

Prerequisites: CSS Animation, a general knowledge of HTML, CSS and JavaScript

  1. Random Walk
  2. Analog Clock
  3. Random Stacked Images
  4. Interactive Roadtrip
  5. Word Fade-In Effect
  6. Random Ken Burns Effect

Further Resources

Rachel Nabors was an early evangelist for the Web Animations API, and has several canonical articles on the specification at the Mozilla Developer Network:

Photograph by Matthias Ripp, used under a Creative Commons Attribution 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.