# CSS: “transition”: X is not a “transition” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-transition-x-is-not-a-transition-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Valid example

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