The CSS Animations Pocket Guide
By Val Head
Due to the closing of Five Simple Steps, some links in the book are not working. If you leave your email address, I’ll send you an updated version with proper links when it’s available.
CSS animations open up a whole new way to look at and use CSS to bring motion to the web in creative ways. This Pocket Guide is designed to help you jump into using CSS @keyframe animations in your own projects, providing a strong foundation on which to start experimenting and creating.
In this book Val covers the basics of CSS @keyframe animations, walking you through a series of examples, and discussing practical considerations for dealing with browsers and fallbacks. You'll have everything you need to start playing with CSS @keyframe animations in just a couple of hours.
Who should read this book?
This is a book for web designers or developers who are new to CSS animations and want to start using them in their own work or experiments.
Part 1: CSS Animation Basics
An explanation of the basic building blocks for creating @keframe animations with CSS.
Part 2: Exploring animation properties
Slightly more advanced and highly useful properties like animation-direction, animation-delay and animation-fill-mode give you more fine-tuned control over your animations. This section shows how and when to use these properties.
Part 3: Understanding Easing
Where an object goes is important, but how it gets there is even more important. This section covers the details of the easing keywords and custom bezier functions.
Part 4: Common Animation Tasks
This section puts our CSS animation knowledge so far into practice, going into the details behind four example animations: an infinitely looping animation, animating with steps, using animation-play-state and applying multiple animations to one object.
Part 5: Performance and browser support
This section looks at the practical aspects of using CSS animations in production work. It covers how to determine browser support and what to consider when choosing your approach to fallbacks.