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
- No extra element
- No pseudo-element
- One animation
.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
- A CSS-only wavy divider Use modern CSS and few lines of code to create a cool divider.
- A CSS-only fragmentation effect Add a fancy framentation effect to images using CSS mask.
- A wavy circle with cool hover effect Place your image inside a fancy wavy frame with a cool hover effect.
- The gotcha of align-content with block elements The new align-content won't center your content like you may expect.