Skip to main content
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


More CSS Tips