Mouse over the element below:
Internet Explorer 10, Firefox, Chrome, and Opera supports the transition property.
Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the transition property.
Note: Chrome 25, and earlier versions, requires the prefix -webkit-.
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:
Transition effect on the width property, duration: 2 seconds:
Note: If the duration is not specified, the transition will have no effect, because default value is 0.
The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:
Specify :hover for <div> elements:
Note: When the cursor mouse out of the element, it gradually changes back to it's original style.
To add a transitional effect for more than one style, add more properties, separated by commas:
Add effects on the width, height, and the transformation:
The following table lists all the transition properties:
|transition||A shorthand property for setting the four transition properties into a single property||3|
|transition-property||Specifies the name of the CSS property to which the transition is applied||3|
|transition-duration||Defines the length of time that a transition takes. Default 0||3|
|transition-timing-function||Describes how the speed during a transition will be calculated. Default "ease"||3|
|transition-delay||Defines when the transition will start. Default 0||3|
The two examples below sets all transition properties:
Use all transition properties in one example:
The same transition effects as above, using the shorthand transition property:
Your message has been sent to W3Schools.