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

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

Using the longhand property to avoid the warning

<div style="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.

The <marquee> element is obsolete, so text that scrolls across the page has to be animated with CSS instead.

Browsers still render <marquee> so old pages keep working, but the HTML standard lists it among the presentational features authors must not use, and points to CSS transitions and animations as the right tool for moving content. Its attributes, such as behavior, direction, scrollamount and scrolldelay, go away with it. The validator reports the element once and doesn't flag each of those attributes on its own.

Scrolling text is also hard to read, and a <marquee> gives visitors no way to stop it. WCAG success criterion 2.2.2 (Pause, Stop, Hide) asks for a way to pause, stop or hide content that moves by itself for more than five seconds alongside other content. Often the best fix is a plain, static line of text. If the movement has to stay, a CSS @keyframes animation reproduces it, and the prefers-reduced-motion media query turns it off for people who have asked their system to reduce motion. Pausing on hover helps mouse users, but keyboard and touch users still need a pause button to meet 2.2.2.

Invalid example

A news line that scrolls from right to left:

<marquee behavior="scroll" direction="left" scrollamount="4">

Registration for the spring semester closes on Friday.

</marquee>

Valid example

The same line scrolls with a CSS animation that pauses on hover and stops when the user prefers reduced motion:

<p class="ticker">

<span>Registration for the spring semester closes on Friday.</span>

</p>

.ticker {

overflow: hidden;

white-space: nowrap;

}

.ticker span {

display: inline-block;

padding-left: 100%;

animation: ticker 15s linear infinite;

}

.ticker:hover span {

animation-play-state: paused;

}

@keyframes ticker {

to {

transform: translateX(-100%);

}

}

@media (prefers-reduced-motion: reduce) {

.ticker span {

padding-left: 0;

animation: none;

}

}