CSS transition property: how to animate without JavaScript

CSS3 brought in a long list of new features for building good-looking effects, and one of the most useful of them is the transition property.

The transition property is a CSS3 module. You can use it to create a dynamic change on an HTML tag or a class with a very simple structure:

css

transition: property duration timing-function delay;

CSS3 transitions are an excellent way to add a bit of animation to a site without writing a single line of JavaScript. Before we start, here is a CSS tutorial of mine that puts this property to work:
Tutorial – build a card UI in CSS

The property

First things first: for the transition property to do anything, the property it applies to has to be declared. In our example we are going to add a transition on a background-color. To write the standalone property, use:

css

transition-property: background-color;

The transition

Once the property is set, you need a start value and an end value. In our example that means a starting colour, then an end value tied to another state.
Here we set the transition property on background-color, then the starting background-color on #element, then the end value for when the user hovers over the element, with #element:hover:

css

#element {
    transition-property:background-color;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Animation duration

Now that the property to animate has its start and end values, we need to set how long the transition lasts. You do that with a duration in seconds or milliseconds, like this:

css

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

This means the #element div changes its background-color over 200 milliseconds (0.2 seconds)

The transition-timing-function property

That code is enough to get a transition working, but there is also the transition-timing-function property. It changes the feel of the transition. By default the transition property uses the ease curve. You can pick one of the other built-in curves, or write a Bézier curve of your own.

css

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

Here is what it looks like in our example:

css

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Delaying the transition

Finally, just as you set a duration, the transition-delay property lets you delay the moment the effect starts.

css

transition-delay: 1s;

css

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    transition-delay: 1s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

···

CSS