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

Looking at CSS3 Transitions

by kirupa | 2 August 2011

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

By default, state changes in CSS are instantaneous. Let's take a simple example where you have a div whose background color changes color when you hover over it.

Here is what you see initially:

normal version

When you hover it, here is what you see:

here is the hover version

Notice that the background changed instantaneously from red to black upon hover.

Up until CSS3, you had no way of changing the "instantaneousness" of the change without using something like JavaScript. In this article, let's look at how you can define transitions using nothing but CSS!

Say "Hello" to CSS3 Transitions

With CSS3, you have the ability to specify a transition where the change is more gradual as opposed to being sudden:

[ click here for a live / running example ]

You can see a live example here if you are running on a recent version of Firefox, Chrome, Opera, or Safari. Internet Explorer doesn't support CSS3 transitions...yet.

What is a Transition

A transition, to put in the most unappealing way possible, is a long and drawn-out change from one property value to another. The duration for "long and drawn-out" can vary of course from really short to really long. Let's look at this in more detail.

As you know, the shortest path between two property values is a sudden change from one value to the other:

example of a 0 second transition

In this example, the property in question is the color. As you can tell, the starting and ending values for our color property are red and black. Just like the example I started this tutorial off with, the change between the colors is sudden.

What you may not realize is that even sudden changes have a transition. A sudden change is nothing more than a transition with a duration of 0 seconds.

A 0 second transition isn't particularly interesting, so let's actually give our transition a duration of...let's say...half-a-second:

a duration of .5 seconds is now specified

Because the property change is no longer sudden, you are able to see the intermediate colors found on the path between red and black. A more technical/fancy way of describing this is that you are now able see the interpolated values between your starting value and ending value for your color property.

Implementing our Transition in CSS3

Now that you have an idea of what transitions are, let's go ahead and implement one. First, copy and paste the HTML and CSS you see below into your own HTML file:

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Hello...</title>
<style>
#mainContent {
}
#mainContent:hover {
}
p {
}
</style>
</head>

<body>

<div id="mainContent">
<p>What does Marcellus Wallace look like?</p>
</div>

</body>

</html>

The HTML and CSS you see here should look like the example you saw earlier and be pretty straightforward to comprehend. The interesting bit is the following CSS where the background color is defined and changed on hover:

#mainContent {
}
#mainContent:hover {
}

Our transition will need to be defined somewhere here where changing from one color to another is smooth and animated as opposed to sudden. Let's change that!

In your #mainContent rule, add the transition properties in the end directly after your width property:

-webkit-transition:background-color .5s ease-in;
-moz-transition:background-color .5s ease-in;
-o-transition:background-color .5s ease-in;
-ms-transition:background-color .5s ease-in;
transition:background-color .5s ease-in;

Your entire mainContent rule will look as follows after you insert the above transition:

#mainContent {
}

If you save your changes and preview your application in a supported browser, you will see the transition when you hover over the red background!

Deconstructing a CSS Transition

A CSS transition is made up of three things:

Name of the CSS property we wish to listen for changes to
Duration of the transition
Type of easing function

Each transition property you define contains these three pieces of information. Our transition is no different:

transition:background-color .5s ease-in;

Let's look at each piece in greater detail:

background-color is the CSS property our transition will affect
.5s is the duration specified in seconds
ease-in is the type of easing function used.

Putting all of these things together, you have the definition of a beautiful CSS transition. This beauty is slightly marred by the vendor-specific extensions -webkit, -moz, -o, and -ms. Once the W3C officially signs off on CSS transitions and the various browser vendors provide full support for it, you will no longer need to use these extensions.

Building your Own Transition

We are almost nearing the end. While everything seems pretty straightforward, there are a few loose ends that we need to tie up.

For starters, you cannot specify any CSS property as something that can be animated by a transition. You are limited only to the properties listed in the following table (taken verbatim from the W3C Transitions spec):

Property Name	Type
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

As long as you specify a CSS property from the above table, you should be golden.

Next up is the duration (transition-duration to be precise) property. This one is very straightforward. By default, your transition has a value of 0 which corresponds to a sudden change. You can specify a positive number which corresponds to the number of seconds the transition will take.

The last thing we will look at is the type of easing function (aka the transition-timing-function) you can use. The values you can use are:

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier

These easing functions alter the the rate at which the interpolation between your CSS property's starting and ending values occurs.

You can play with these values to see how your choice of easing function changes your transition.

Conclusion
Wasn't that fun? As you can see, actually learning to use transitions in CSS is pretty straightforward. The one thing I should reiterate is that only the most recent browsers (minus Internet Explorer) support transitions. This means majority of your site's audience will be unable to view them.

If you want a more general-purpose solution, you should explore the large array of JavaScript libraries such as jQuery that allow you to deliver transitions across a wider variety and age of browsers!

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