CSS3 Transitions

CSS3 Transitions

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

Mouse over the element below:

CSS3
Transition

Browser Support

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

Numbers followed by -webkit-, -moz-, or -o- specify 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

Color Picker

colorpicker
REPORT ERROR
HOME
PRINT
FORUM
ABOUT

Top 10 Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
XML Tutorial
SQL Tutorial
PHP Tutorial
ASP.NET Tutorial
jQuery Tutorial
Angular Tutorial
Bootstrap Tutorial

Top 10 References

HTML Reference
CSS Reference
JavaScript Reference
Browser Statistics
HTML DOM
XML DOM
PHP Reference
jQuery Reference
HTML Colors
HTML Character Sets

Top 10 Examples

HTML Examples
CSS Examples
JavaScript Examples
HTML DOM Examples
PHP Examples
jQuery Examples
XML Examples
XML DOM Examples
ASP Examples
SVG Examples

Web Certificates

HTML Certificate
HTML5 Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
XML Certificate

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2015 by Refsnes Data. All Rights Reserved.