Creating Web Animations

Chapter 7. CSS Animations Versus CSS Transitions

As you’ve seen, right now in CSS you have two techniques for visualizing change that are competing for your attention: CSS animations and CSS transitions. On the surface, they seem similar. But once you get to know them, sort of like identical twins, you’ll find that they are quite different in many important ways. In this chapter, we’ll explore the similarities and the differences that exist between animations and transitions.

Almost everything you will see here will be a review of the core concepts the previous chapters introduced, but hopefully seeing them in the context of comparing animations and transitions will give you a different perspective on what you learned. Besides, the more you see animations and transitions defined and described, the more fluent you will be in thinking about them and knowing what to do.

Similarities

As I just mentioned, animations and transitions seem very similar—especially from a distance. They both allow you to:

• Specify which CSS properties to listen for changes on
• Set timing (easing) functions to alter the rate of going from a one property value to another
• Specify a duration to control how long the animation or transition will take
• Programmatically listen to animation and transition-specific events that you can then do with as you wish
• Visualize CSS property changes

Beyond these points, though, you will see that animations and transitions diverge a bit and let their uniqueness shine through. ...