Skip to content

prefers-reduced-motion media query check should use prefers-reduced-motion: reduce? #39543

Closed
@SachaG

Description

@SachaG

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling

What specific section or headline is this issue about?

Toning down the animation scaling

What information was incorrect, unhelpful, or incomplete?

I noticed that on https://web.dev/articles/prefers-reduced-motion the example uses prefers-reduced-motion: reduce while on the MDN page it only uses prefers-reduce-motion. I think that might potentially be a mistake?

What did you expect to see?

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

Do you have any supporting links, references, or citations?

https://web.dev/articles/prefers-reduced-motion

Do you have anything more you want to share?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Content:CSSCascading Style Sheets docsaccepting PRFeel free to open a PR to resolve this issuegoal: clarity(Experimental label) Issues about unclear/confusing/inconcise content.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions