CSS3 transition Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The transition CSS property allows you to define the transition between two states of an element. It is a shorthand property for transition-property, transition-duration, transition-timing-function and transition-delay.
The following table summarizes the usages context and the version history of this property.
| Default value: | all 0 ease 0; See individual properties |
|---|---|
| Applies to: | All elements, ::before and ::after pseudo-elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the transition property in action.
Example
Try this code »button {
background: #fd7c2a;
-webkit-transition-property: background 2s; /* For Safari 3.0+ */
transition: background 2s; /* Standard syntax */
}
button:hover {
background: #3cc16e;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
transition-property |
Specifies the names of the CSS properties to which a transition effect should be applied. |
transition-duration |
Specifies the number of seconds or milliseconds a transition animation should take to complete. |
transition-timing-function |
Specifies how the intermediate values of the CSS properties being affected by a transition will be calculated. |
transition-delay |
Specifies when the transition will start. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element transition property. |
Browser Compatibility
The transition property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Transitions.
Related properties: transition-delay, transition-duration, transition-property, transition-timing-function.
