Skip to main content

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;
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