CSS Tip

Accelerate a rotation on hover

Do you want to accelerate the rotation of your element on hover? Here is a simple CSS trick using animation-composition and a few lines of code

.box {
  --_a: rotate 5s linear infinite;
  animation: var(--_a),var(--_a) paused;
  animation-composition: add;
}
.box:hover {
  animation-play-state: running;
}
@keyframes rotate {
  to {rotate: 1turn}
}

See the Pen Accelerate a rotation on hover by Temani Afif (@t_afif) on CodePen.

The same trick can be used to slow down the rotation