Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Differences Between Transitions and Animations
Transitions require a trigger to run. The trigger may be one of the events listed in the last section or it might be JavaScript, but the transition needs something outside itself to start.
CSS animations don’t need a trigger. They can respond to a trigger, but one isn’t needed to start the animation. Animations can run automatically when the page first loads. If you need your elements to change or move automatically, you have only one choice: animations.
Transitions are limited to an initial and final state (see Figure 1). Animations can include as many intermediate states (keyframes) as desired in between the initial and final state. This gives you more control over CSS animations and lets you create more complex animations. Transitions work better for simpler animations.
)
Figure 1 Transition and animation states
Transitions can’t change CSS properties. You set the property values on a selector and perhaps the selector’s :hover state. The transition defines how the change occurs, but not the specific start and end values.
Animations, on the other hand, can change property values inside their keyframes. The property values don’t even need to exist outside of the animation keyframes. This makes animation far more dynamic and flexible than transitions.
Transitions can’t loop. They run when triggered and then run in reverse when the trigger is removed. Animations can loop as many times as you want. They can run forward or in reverse, or they can alternate between the two. Once again, CSS animations offer more refined control.
I’m probably making it sound as though you should always choose animations. Transitions have their good side, too. Transitions are typically easier and quicker to work with. This is especially true if you use JavaScript to give yourself a little more control. For example, it’s easier for JavaScript to make changes to intrinsic property values than to property values inside animation keyframes.
As a general rule, you’ll write more code using CSS animations than you will using CSS transitions, assuming both are attempting to do the same thing. However, if you find yourself writing the same transition code over and over, you might want rewrite it as a single keyframe animation that can be easily added to a number of different elements.