CSS3 transition Property


Example

Hover over a <div> element to gradually change the width from 100px to 300px:

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

div:hover {
    width: 300px;
}

Try it yourself »

Definition and Usage

The transition property is a shorthand property for the four transition properties:

transition-property, transition-duration, transition-timing-function, and transition-delay.

Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

Default value: all 0 ease 0
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transition="all 2s" Try it


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 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit- 
12.1
10.5 -o-


CSS Syntax

transition: property duration timing-function delay|initial|inherit;

Property Values

Value Description
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Defines when the transition effect will start
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS tutorial: CSS3 Transitions

HTML DOM reference: transition property



Color Picker

colorpicker