Property Description

The transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

A value of 0 indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

Note: Multiple delays may be specified - each delay will be applied to the corresponding property as specified by the transition-property property.

This property has the following syntax:

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

Property Values

Value	Description
property	Specifies the transition-property. See transition-property for possible values
duration	Specifies the transition-duration. See transition-duration for possible values
timing-function	Specifies the timing-function. See timing-function for possible values
delay	Specifies the transition-delay. See transition-delay for possible values
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The first example shows a link decorated as a button. When hovered over, the link changes color:

a {
  background: #eee;
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
  border: 2px solid #333;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

a:hover {
  background: #333;
  color: #eee;
}

This produces the following result:

The second example is the same as the first, but with transitions added. When hovered over, the link changes color as before, but with a smooth transition:

a {
  background: #eee;
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
  border: 2px solid #333;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 600ms;
  -webkit-transition-timing-function: ease-in-out;
}

a:hover {
  background: #333;
  color: #eee;
}

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
26 4.0 -webkit-	16 4.0 -moz-	10.0	6.1 3.1 -webkit-	12.1 10.5 -o-

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	0