Transition Shorthand Woes
The
transition
and
animation
shorthand properties are great to reduce the verbosity when declaring
several CSS properties at the same time. However, the combination of both
enforced and unenforced order for certain properties make these properties
a bit challenging.
In general, these two CSS properties are very lenient and allow us to specify the shorthand values in any order, which is great since we don’t have to memorize a very specific order. For example, these two lines are functionally identical:
p {
transition: linear 150ms ease;
transition: 150ms ease linear;
}
Because the set of allowed values for each property are mutually exclusive, then the order doesn’t matter, since the CSS parser can determine from the data type of each value what property it should be assigned to. However, this falls apart when we add a delay, which makes these two declarations different:
p {
transition: linear 150ms ease 200ms;
transition: 200ms ease linear 150ms;
}
Because the transition-duration
and transition-delay
properties both
accept a time value, the transition
shorthand no longer can infer the
desired property simply from the value’s data type, instead the order of
the properties matters with the first time value assigned to
transition-duration
and the second time value assigned to
transition-delay
.
Because this can be difficult to remember, I appreciate
Josh Comeau’s advice to always specify
transition-delay
separately so it’s always clear what is what:
p {
transition: linear 150ms ease;
transition-delay: 200ms;
}
While more verbose, you future self will thank you!