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

1. Transitions
2. Keyframes
3. Ease-in-and-Ease-Out
4. CSS Motion Design Basics
5. Keyframes, Tweening & Framerate
6. Anticipation & Follow-Through
7. Overlapping Action
8. Gravity, Squash & Stretch
9. Arcs, Circles & Ellipses
10. steps()
11. Walk Cycle
12. Animation on a Path
13. 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.