CSS3 Animations & Transitions

With CSS we can create animations and transitions which can replace Flash animations, animated images, and JavaScripts in existing web pages.

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.

Differences

Animations and transitions show their differences when it comes to how you trigger them to play, whether they loop easily, how complicated of a transition you can define, how formal you must be in being able to use them, and how well they play with JavaScript. 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. Another 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 automatically.

Looping

This is pretty simple. Animations can be easily made to loop by setting the animation-iteration-count property. You can specify a fixed number of times you want your animation to repeat:

animation-iteration-count: 5;

If you just want your animation to loop forever, you can do that as well:

animation-iteration-count: infinite;

Transitions, on the other hand, don’t have a property that specifies how many times they can run. When triggered, a transition runs only once. You can make a transition loop by fiddling with the transitionEnd event, but that isn’t particularly straightforward — especially when compared with animations.

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

Specifying Properties Up-Front

The next 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 recognised by your transition must be explicitly represented.

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

#mainContent { 
background-color: #CC0000;
transition:background-color .5s ease-in;
}
#mainContent:hover { 
cursor: pointer;
background-color: #000000;
width:500px;
}

Upon hover, I specify a different value for both background-color as well as width. My transition specifies only background-color though. This means your browser is only listening for changes on the background-color property.

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 { 
background-color: #CC0000;
transition:background-color .5s ease-in, width .5s ease-in
}
#mainContent:hover { 
cursor: pointer;
background-color: #000000;
width: 500px;
}

What About transition: all?

You do not have to specify every property that you care about when using a transition. You could simplify your life by using the all value instead: transition: all .5s ease-in. I do not recommend this because you will take a performance hit. Your browser is now listening for a whole lot of properties as opposed to just a few that you know you will be modifying. Unless you have a strong need to do this, I would recommend specifying each CSS property you wish to transition individually.

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 { 
0% {
left: -150px;
}

20% {
left: 50px;
height: 200px;
}

80% {
left: 200px;
height:300px;
}

100% {
left: 600px;
background-color:#FFFFFF;
}
}

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!

More References

Like what you read? Give Gary Fagan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.