Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Choosing Transitions or Animations
Based on the previous section, you might be thinking animations are usually the better choice. I certainly mentioned more pros for CSS animations than I did for transition. However, in practice you’ll find you don’t need most of those benefits to create effects like sliding menus or changing background colors.
Given their similarities and differences, you’ll likely choose to work with transitions when:
- The animation is simple.
- Changes occur only between start and end states.
- You want to keep your code lighter.
- You want to use JavaScript for greater control.
You’ll likely choose CSS animations when:
- The animation is more complex.
- You have need for more than two states.
- The animation needs to loop.
- The animation needs to run in either direction.
- The animation needs to start, stop, or pause itself.
You’ll find most animated effects on websites are of the simple kind, so despite the added benefits of CSS animations, you’ll likely work more with transitions. Reach for transitions first and reach for CSS animations when you want to create something you can’t create with transitions alone.
Transitions are quicker and easier to work with, and animations give you more control. That’s the main thing to keep in mind when choosing between the two.
There’s still the question of performance.