All-in-one transition spec

transition

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

Property values

Some or all of the individual transition property values may be specified, in any order. If only one timing value is provided, it specifes the transition-duration. In order to specify a transition-delay, provide it as the second timing value.

Examples

#grow {            
    height: 100px;
    transition: height 2s ease-in-out .5s;
}
#grow:hover {
    height: 200px;
}

transition