While they are a relatively recent addition to the CSS specification, transforms, transitions and keyframe animations are a vital and exciting part of web development, while making pages and images easier to make and manipulate.
Goals: Transform and animate web page elements.
Prerequisite: Introduction to CSS
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.
Val Head’s CSS Animations Pocket Guide, previously published by Five Simple Steps, is now 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.
Step through the transitions and transforms tutorial created by Rick Bradshaw.
Photograph by Mostafa Hamad, used with permission.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.