While they are a relatively recent addition to the CSS specification, transitions and keyframe animations are a vital and exciting part of web development, bringing pages to life with movement.
Goals: Animate web page elements
Prerequisite: Introduction, Transforms
Total practice time: 2 hours
Transitions
Keyframes
Ease-in-and-Ease-Out
CSS Motion Design Basics
Keyframes, Tweening & Framerate
Anticipation & Follow-Through
Overlapping Action
Gravity, Squash & Stretch
Arcs, Circles & Ellipses
steps()
Walk Cycle
Animation on a Path
Limits of CSS Anmation
If you're interested in applying what you've learned, the CSS Image Gallery reading list can be a good place to start.
Suggested Reading
If I may be so bold, I would suggest that readers who wish more information on CSS Animations read my book.
Alternatively, you may want to check out this excellent animation workshop by Rachel Nabors; there’s also a very good introductory YouTube video by her on transitions.
Val Head’s CSS Animations Pocket Guide, previously published by Five Simple Steps, is available for free, and a very good read.
While it was originally written for Flash programmers, Robert Penner's free chapter on tweening from his animation book is still very applicable to web development.
Recommended Resources
Read Using CSS Animations on the Mozilla Developer Network.
Photograph by Hernán Piñera, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.