Smoothly stop a rotation on hover
Make your rotation look more natural by smoothly stopping it on hover instead of an abrupt stop. No complex code is required!
The rotation will resume slowly on mouse-out as well.
.box {
animation: rotate 2s linear infinite;
transition: transform 1s ease-out;
}
.box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}
@keyframes rotate {
to {rotate: 1turn}
}See the Pen Smooth stop the rotation on hover by Temani Afif (@t_afif) on CodePen.
You can have the opposite effect by adjusting a few values. You smoothly start the rotation on hover.
The element will slowly stop on mouse-out as well.
.box {
animation: rotate 2s linear infinite paused;
transition: transform 1s ease-out;
}
.box:hover {
animation-play-state: running;
transform: rotate(-.2turn);
}
@keyframes rotate {
to {rotate: 1turn}
}See the Pen Smoothly start the rotation on hover by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Fluid typography with discrete steps Improve your fluid typography implementation using the round() function.
- A CSS-only wavy divider Use modern CSS and few lines of code to create a cool divider.
- Turn an image into a postage stamp A few lines of code to create a cool postage stamp shape.
- A wavy circle with cool hover effect Place your image inside a fancy wavy frame with a cool hover effect.