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
- CSS Motion Design Basics
- Keyframes, Tweening & Framerate
- Anticipation & Follow-Through
- Overlapping Action
- Gravity, Squash & Stretch
- Arcs, Circles & Ellipses
- 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.
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.
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.