Make Interactions Interruptible

#transition vs keyframesinterruptibility

Transitions interpolate toward the latest state and can be interrupted; keyframe animations run on a fixed timeline.

live_demo

code

.interrupt-box.transition-demo {
  transition: transform 0.6s ease, background 0.3s;
}
.interrupt-box.transition-demo:hover {
  transform: translateX(120px);
}

.interrupt-box.keyframe-demo {
  animation: slide-right 1.2s ease-in-out infinite alternate;
}
.interrupt-box.keyframe-demo:hover {
  animation-play-state: paused;
}

@keyframes slide-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(120px);
  }
}