Source code
Revision control
Copy as Markdown
Other Tools
<html>
<head>
<title>test prefers-reduced-motion simulation</title>
<style>
.animation {
animation: --pulse 0.5s linear infinite alternate;
width: max-content;
padding: 1em;
background-color: blue;
color: white;
}
@media (prefers-reduced-motion: no-preference) {
.animation {
animation-name: --pulse;
}
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation-name: none;
background-color: green;
}
}
@keyframes --pulse {
to {
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class="animation">Animation</div>
<iframe
src='https://example.org/document-builder.sjs?html=<style>.animation{animation:--pulse 0.5s linear infinite alternate;width:max-content;padding:1em;background-color:blue;color:white;}@media (prefers-reduced-motion:no-preference){.animation{animation-name:--pulse;}}@media (prefers-reduced-motion:reduce){.animation{animation-name:none;background-color:green;}}@keyframes --pulse{to{transform:scale(1.2);}}</style><div class="animation">Animation</div>'>
</iframe>
</body>
</html>