CSS Introduction | CSS3 Transforms | Transition

Transition

In CSS3, you can use the transition property to smoothly change an element’s property values over a specified time.

CSS3 Transition Support Versions

The major web browser versions that support CSS3 transitions are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

Transition

The properties provided for transitions are as follows.

1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function

transition Property

The transition property can be defined in the following order.

1. Set the CSS style transition effect to add to the element.
2. Set how long the transition effect will last.

The following example triples the width of an element over 1 second when the mouse is placed over that element.

<style>
    div.keyboard {
        width: 100px;
        -webkit-transition: width 1s;
        transition: width 1s;
    }
    div.keyboard:hover { width: 300px; }
</style>

You can also change several properties of the element at the same time.

The following example changes not only the width of the element, but also its height, when the mouse is placed over that element.

<style>
    #resize {
        height: 100px;
        width: 150px;
        -webkit-transition: width 1s, height 3s;
        transition: width 1s, height 3s;
    }
    #resize:hover { width: 300px; height: 500px; }
</style>

The default duration is 0 seconds, so if you do not specify how long the effect lasts, no effect will appear.

transition-timing-function Property

The transition-timing-function property sets the speed of a transition effect over time.

The transition-timing-function property can use the following values.

1. linear : The transition effect progresses at a constant speed from beginning to end.
2. ease : The default value. The transition effect starts slowly, then becomes faster, and slows down again at the end.
3. ease-in : The transition effect starts slowly.
4. ease-out : The transition effect ends slowly.
5. ease-in-out : The transition effect starts slowly and ends slowly.
6. cubic-bezier(n,n,n,n) : The transition effect progresses according to a user-defined cubic-bezier function.

<style>
    div {
        width: 100px;
        -webkit-transition: width 1s;
        transition: width 1s;
    }
    #div_01 {
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
    }
    #div_05 {
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    div:hover { width: 300px; }
</style>

transition-delay Property

The transition-delay property sets the delay before the transition effect appears. The transition effect starts only after the time set by this property has passed.

<style>
    #resize {
        height: 100px;
        width: 150px;
        -webkit-transition: width 1s, height 2s;
        transition: width 1s, height 2s;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }
    #resize:hover { width: 300px; height: 300px; }
</style>

Applying Transition and Transform Effects Together

You can also apply a transition effect and a transform effect together.

<style>
    #windmill {
        height: 100px;
        width: 100px;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        transition: width 2s, height 2s, transform 2s;
    }
    #windmill:hover {
        width: 300px;
        height: 300px;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
</style>

CSS3 transition Properties