HTML Guides for css-wide keywords

The transition shorthand contains a token it doesn't accept, often a CSS-wide keyword like initial written next to other values.

transition takes one or more transitions separated by commas. Each one can list a property name (or all), a duration, a timing function such as ease or linear, and a delay. The validator quotes the token that doesn't fit. Browsers drop an invalid declaration entirely, so the element gets no transition from that rule.

CSS-wide keywords such as initial, inherit and unset are only valid as the whole value. transition: initial passes, but transition: all initial and transition: opacity 0.3s, initial don't. To turn transitions off, write transition: none. To animate, replace the keyword with a duration and, if you want one, a timing function.

The same message shows up for a misspelled or invented timing function like ease-in-out-slow, and for a duration or delay written without a unit. A bare 0 isn't a valid time, so write 0s.

Invalid example

<div style="transition: all initial;">Card</div>

Valid example

<div style="transition: all 0.3s ease;">Animated card</div>

<div style="transition: none;">Static card</div>