All-in-one transition spec
transition
![](/img/style/transition/transition.png)
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;
}