Beispiel:CCS-animation-reduced.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
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 (prefers-reduced-motion: no-preference) {
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%;
}
}
</style>
<title>prefers-reduced-motion</title>
</head>
<body>
<p>
Hello World
</p>
</body>
</html>
