CSS Tip

Slow down a rotation on hover

Did you ever wanted to slow down a rotating element on mouse hover? You can easily do it with a simple code:

.box {
  --d: 5s; /* animation duration */
  --s: 0.5; /* speed factor 
          0   : nothing happens
         [0 1]: decrease the speed
            1 : stops the animation
[1 +infinity[ : move in the opposite direction
  */
  --_a: r linear infinite;
  animation: 
    var(--_a) var(--d),
    var(--_a) calc(var(--d)/var(--s)) 
    reverse paused;
  animation-composition: add;
}
.box:hover {
  animation-play-state: running;
}
@keyframes r {
  to {rotate: 1turn}
}

See the Pen Hover to slow down the animation by Temani Afif (@t_afif) on CodePen.

The same trick can be used to accelerate the rotation

More CSS Tips