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!