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
Random Walk
Analog Clock
Random Stacked Images
Interactive Roadtrip
Word Fade-In Effect
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.
