X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

CSS3 Transitions


CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

Mouse over the element below:

CSS3
Transition

Browser Support

The numbers in the table specifies the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Property
transition 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-


What Are CSS3 Transitions?

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

Example

Add a transition effect on the width property, with a duration of 2 seconds:

div {
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

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

The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Example

Specify :hover for <div> elements:

div:hover {
    width: 300px;
}

Try it yourself »

Note: When the cursor mouse out of the element, it gradually changes back to its original style.


Multiple Changes

To add transition effects for more than one CSS property, separate the properties with a comma:

Example

Add transition effects on width, height, and transformation:

div {
    -webkit-transition: width 2s, height 2s,-webkit-transform 2s;  /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

Try it yourself »


More Transition Examples

The example below uses all the four transition properties:

Example

div {
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
    /* Standard syntax */
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

Try it yourself »

The same transition effects as the example above. However, here we are using the shorthand transition property:

Example

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

Try it yourself »


CSS3 Transition Properties

The following table lists all the transition properties:

Property Description CSS
transition A shorthand property for setting the four transition properties into a single property 3
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-timing-function Specifies the speed curve of the transition effect 3



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook