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!