Moonrise timelapse in northern Iraq by Mostafa Hamad

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

Core Material

Transforms

  1. Introduction to Transforms
  2. rotate
  3. skew, scale & translate
  4. Mirroring Elements

Animation

  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.

Rachel Nabors 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 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.

Recommended Resources

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.