Questions of the Week

Active Discussions

Interesting Title
by author
Interesting Title
by author
Interesting Title
by author
Interesting Title
by author

see all active posts

CSS3: Animations vs. Transitions

by kirupa | 16 August 2011

Have questions? Discuss this HTML5 tutorial with others on the forums.

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this short article, let's examine the similarities and differences between them so that you can know when to use which.

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

Similarities

From a distance, both animations and transitions are very similar. 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 this point, though, you will see that animations and transitions diverge a bit and let their uniqueness shine through.

Differences

Animations and transitions show their differences when it comes to how you trigger them to play, how complicated of a transition you can define, and how formal you must be in being able to use them. Let's explore those topics in greater detail.

Triggering

One of the major differences between animations and transitions can be seen in how you trigger them to start playing.

A transition only plays as a reaction to a CSS property that has changed. A common scenario is one where you use the :hover pseudo class to change the value of a CSS property:

example of hovering to make something larger

To use the example visualized here, if a transition is defined, you would be able to see the circle growing from its normal size to its hover size. Another common way of triggering a transition is to use JavaScript to programmatically add or remove CSS classes to simulate a CSS property change.

Animations, on the other hand, don't require any explicit triggering. Once you define the animation, it will start playing. You can simulate triggering an animation if you want by specifying the animation in a separate rule and programmatically applying it, but that isn't very common. By default, if you define an animation in CSS, it will start to play.

Note
Animations can have their animation-play-state property set to Paused - which will cause the animation to not play by default unless the property is changed to Running. The W3C is considering removing this property, so as of now, consider the animation-play-state property to not exist.

Defining Intermediate Points / Keyframes

With an animation, you have the ability to define keyframes which give you more control over your CSS property values beyond just the start and the end:

animations FTW

You can set as many keyframes as you want, and when your animation plays, each keyframe will be hit with the specified property changes reflected. This allows you to create the kinds of involved animations that help HTML5 compete with more established animation technologies like Flash more effectively.

With a transition, you don't have much control over anything beyond the end result:

transitions are linear

A transition simply goes from an initial state to the final state. You cannot specify any points in-between like you can with an animation, so a transition might not be a good choice if you are trying to create the next Teen Girl Squad sensation.

Specifying Properties Up-Front

The last thing I will describe is how formal animations and transitions are when it comes to defining a transition between CSS property values.

On the formal side, you have transitions. Every CSS property you want recognized by your transition must be explicitly represented.

For example, let's say you have something like the following:

#mainContent {

}
#mainContent:hover {
}

Upon hover, I specify a different value for both background-color as well as width. My transition specifies only background-color though.

If I wanted my transition to affect both the background-color and width properties, I will need to explicitly add another transition entry for width:

#mainContent {

}
#mainContent:hover {
}

With animations, you have the ability to specify properties at a whim in each keyframe without having to do anything that resembles declaring them:

@keyframes imageSlide {

}

In this example, the height and background color of whatever element I am animating will smoothly transition when the appropriate keyframe is reached - even if the property was never listed before!

Conclusion
There you have it - a candid look at what makes transitions and animations similar yet so very different. My general approach for determining when to use which goes like this:

If what I want requires the flexibility provided by having multiple keyframes, then I go with an animation.
If I am looking for a simple from/to animation, I go with a transition.

Any and all other differences unrelated to keyframes are just cosmetic. If you are willing to write some JavaScript, you can neutralize the other differences fairly easily!

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - please drop by our friendly forums and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use