# 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:
    [ <transition-property> |
      <transition-duration> |
      <transition-timing-function> |
      <transition-delay> ]

# 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;
        border-radius: 5px;
        -webkit-border-radius: 5px;
    }

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

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;
        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;
    }

Normal Link Link with Transition

# Browser Support

Firefox | IE | Chrome | Opera | Safari

# Miscellaneous Information

Inherited: | No
Defined In: | Mozilla Specific
Initial Value: | 0
Applies To: | All elements, :before and :after pseudo elements