prefers-reduced-motion

[Matthias Scharwies]

Servus!

Ich wollte eigentlich mal ne SELF-Pause machen, das von @Rolf B angesprochene Beispiel hat mich aber nicht in Ruhe gelassen.

Ich habe die @keyframes-Regel aus der Media Query entfernt und jetzt funzt's:

@media not (prefers-reduced-motion:reduce) {
  p {
     color: #FFF;
     background: no-repeat -5% / 10% 95% linear-gradient(91deg, #FF000020 0%, #FF0000E0 50%, #FF000020 100%), black;
      animation: 2s linear 0s infinite alternate wonky_cylon;
     
  }
  p { text-align: center; }
  p::after { content: " - the Imperious Leader will find you!"; }
 
}
 @keyframes wonky_cylon {
   from { background-position: -10% -100%; }
   to { background-position: 110% 200%; }
 }

• https://wiki.selfhtml.org/wiki/Beispiel:CCS-animation-reduced.html
• im Frickl

Ich habe im media queries-Artikel einen Eintrag zu prefers-reduced-motion hinzugefügt und arbeite an einem Beispiel im Bereich video.

Wo würdet ihr dieses Beispiel einer dekorativen Animation im CSS-Animations-Tutorial einfügen?

• Am Ende der zahlreichen Einzel-Eigenschaften in CSS/Tutorials/Animation/Animation
• in einem Praxis-Kapitel, das noch zu erstellen wäre?

Herzliche Grüße

Matthias Scharwies

BTW: Ich konnte Rolf nicht im OriginalThread antworten, da ihr imho (wieder einmal) vor lauter Diskutieren das Kernanliegen aus dem Auge verloren hattet:

1. Frage freundlich beantworten
2. Auf Beispiel oder Grundlagenartikel in SELF-Wiki oder MDN hinweisen. (Viele unserer Nutzer lesen ihnen angebotene englische Quellen wohl gar nicht.)

Schade.