Prefers-Reduced-Motion

by Rolf

HTML

<p>
Hello World
</p>

CSS

p {
  padding: 1em 2em;
}
p::after { content: " - are you Kobol?"; }

@media (prefers-reduced-motion:reduce) {
  p { color: #080; }
  p::after { content: " - Greetings to Adama"; }
}

@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%; }
 }
}