Transition Shorthand
The transition shorthand combines property, duration, timing-function, and delay in one declaration.
CSS
Beginner
3 min read
The transition Shorthand
Example
/* Full shorthand: property duration timing delay */
.box {
transition: transform 0.3s ease-out 0s;
}
/* Multiple transitions */
.card {
transition:
transform 0.3s ease,
box-shadow 0.2s ease-out,
opacity 0.4s linear;
} Pro Tip
Always list the duration before the delay — both are time values and order determines which is which.