O'Reilly logo

Creating Web Animations by Kirupa Chinnathambi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required