CSS Tip

Smoothly stop a rotation on hover

Make your rotation look more natural by smoothly stopping it on hover instead of an abrupt stop. No complex code is required!

The rotation will resume slowly on mouse-out as well.

.box {
  animation: rotate 2s linear infinite;
  transition: 1s ease-out;
}
.box:hover {
  animation-play-state: paused;
  transform: rotate(.2turn);
}
@keyframes rotate {
  to {rotate: 1turn}
}

See the Pen Smooth stop the rotation on hover by Temani Afif (@t_afif) on CodePen.

You can have the opposite effect by adjusting a few values. You smoothly start the rotation on hover.

The element will slowly stop on mouse-out as well.

.box {
  animation: rotate 2s linear infinite paused;
  transition: 1s ease-out;
}
.box:hover {
  animation-play-state: running;
  transform: rotate(-.2turn);
}
@keyframes rotate {
  to {rotate: 1turn}
}

See the Pen Smoothly start the rotation on hover by Temani Afif (@t_afif) on CodePen.

More CSS Tips