HTML Guides for animation

none is a valid value for the CSS animation shorthand property, but the W3C CSS validator sometimes flags it incorrectly depending on the CSS level it checks against.

The animation shorthand property accepts none as a value for its animation-name component. According to the CSS Animations Level 1 specification, none means no animation is applied. The shorthand combines up to eight individual properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

The W3C CSS validator can produce false positives for certain shorthand values. When you write animation: none, every major browser interprets it correctly as "no animation." The validator's warning does not indicate an actual problem in your CSS.

There are two ways to address this: ignore the warning since it is a known validator limitation, or use the longhand property animation-name: none instead, which the validator accepts without complaint.

Examples

Flagged by the validator

<divstyle="animation: none;">No animation here</div>

Using the longhand property to avoid the warning

<divstyle="animation-name: none;">No animation here</div>

Both produce the same result in browsers. The longhand form simply avoids the false positive from the validator.