<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.