CSS3 Transition


CSS3 transitions

In CSS3, we can change from one style to another in order to add an effect without using Flash animations or JavaScript.


Browser support

The numbers in the table represent the first browser version number that supports the property.

The number immediately preceding -webkit-, -ms- or -moz- is the version number of the first browser that supports the prefixed attribute.

Property1643985194172053596.png1643985208463030831.png1643985222261087814.png1643985235170032573.png1643985254818020619.png
transition26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

How does it work?

CSS3 transitions are the effect of elements gradually changing from one style to another.

To achieve this, two things must be specified:

  • Specify the CSS property to add the effect to

  • Specifies the duration of the effect.

OperaSafariChromeFirefoxInternet Explorer

Example

A transition effect applied to the width property with a duration of 2 seconds:

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

Note: If the duration is not specified, the transition will have no effect, since the default value is 0.

The effect changes when the value of the specified CSS property changes. A typical CSS property change is when the user mouses over an element:

OperaSafariChromeFirefoxInternet Explorer

Example

Specifies that when the mouse pointer hovers (:hover) over a <div> element:

div:hover
{
    width:300px;
}

Try It! 

Note: When the mouse cursor moves over the element, it gradually changes its original style


Multiple changes

To add multiple styles of transform effects, add properties separated by commas:

OperaSafariChromeFirefoxInternet Explorer

Example

Added width, height and transition effects:

div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

Try It! 


Transition properties

The following table lists all transition properties:

PropertyDescriptionCSS
transitionShorthand property for setting four transition properties in one property.3
transition-propertySpecifies the name of the CSS property to which the transition is applied.3
transition-durationDefines how long the transition effect takes. Default is 0.3
transition-timing-functionSpecifies the time curve of the transition effect. The default is "ease".3
transition-delaySpecifies when the transition effect starts. Default is 0.3

The following two examples set all transition properties:

OperaSafariChromeFirefoxInternet Explorer

Example

Use all transition properties in one example:

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

 Try It! 

OperaSafariChromeFirefoxInternet Explorer

Example

The same transition effect as the example above, but using the shorthand transition property:

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

Try It!