If you have ever wondered what are the main differences between Animation and Transition. This article is what you were looking for.

What is an animation in CSS

Before we jump into the main differences, we need to describe what we refer as an animation in CSS.

CSS animations take place when one of more HTML element is modified by producing one or multiple visual effect, without the use of Javascript.

Simone Cuomo

Animations can be as simple as a button that changes its colour when hovered. Or quite complex, like a fully working clock.

The main difference

Understand the difference between the animation and transition properties is essential to code the right Animation. The next section will cover in details all the advantages and disadvantages of this two individual methodology.

Definition of CSS 3 animation

CSS 3 animation can create one or more effect that can be repeated an infinite amount of time. This does not require to be triggered by any change, and offer a fine set of control over the animation period.

Advantages

• Animation effects can be modified during its period
• The effect be repeated multiple times
• Can be delayed
• It does not require user triggers
• Can be used to create complex animations

Disadvantages

• It is complex to write
• It does not keep state (effect goes back to original state after animation is completed)

Possible use case

• Complex animation like a clock
• Provide delayed animation effect to grasp user attention
• Animation that change the flow and properties changed during its duration.

Definition of CSS 3 Transition

CSS 3 Transition provide you the tool necessary to create one or more effect triggered by a change in an element. This effects can just take place once per element change.

Advantages

• Simple to write
• Keep its state
• Simple to understand
• Can be delayed

Disadvantages

• It is triggered with an event change
• Effect can not be changed during its course
• Animation repetition require JavaScript or user action

Examples

• Hover animations
• Animations on form Submit
• Animation on Error
• Provide an effect, when adding new element on screen

Conclusion – animation vs transition

I personally do not thing that neither of this two properties is better than the other. Each of them has its specific usage within our Web applications.

As described by the above section, there is a fundamental difference between the two properties. Transition is more suitable for simple state change (hover, click, submit, error, success) while animation is more fitted for more complex and defined animation (continuous animation, complex effect, delayed start).

If you want to learn more about Animation in CSS, keep tuned for my next article called “How to use CSS Animations”.