<p>Turn on reduce animation for your specific device and refresh</p>
<div class="animated">
<p>I'm moving!</p>
</div>
@keyframes pan {
0% {
transform: translateX(100px);
}
25% {
transform: translateX(200px);
}
100% {
left: translateX(300px);
}
}
.animated {
animation: 3s linear infinite alternate pan;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation-play-state: paused;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.