Smooth rotation with modern CSS
Use modern CSS to control the rotation of any element smoothly. Hover to rotate, click to accelerate, unhover to return to the initial position following the shortest path!
- Single element (no pseudo-element)
- No keyframes
- Powered by
@property
and math functions
@property --a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@property --i {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
@property --j {
syntax: "<number>";
inherits: false;
initial-value: 1;
}
.box {
--t: 1turn; /* control the modulo (the smallest angle after which you get back to the same visual) */
--d: .8s; /* the transition when you unhover */
rotate: calc(mod(var(--a),var(--t)/2)*var(--i) + clamp(var(--t)/-2*var(--i),(var(--t)/2 - mod(var(--a),var(--t)))*9999,0deg));
transition: --i var(--d),--a 0s var(--d),--j var(--d);
}
.box:hover {
--i: 1;
--a: calc(15turn*var(--j));
transition: --i 0s,--a 30s linear,--j .5s;
}
.box:active {
--j: 2; /* control the speed on click [1 infinity[ */
}
See the Pen Hover to rotate, click to accelerate, unhover for a smooth stop! by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Smoothly stop an infinite rotation Using modern CSS to stop an infinite rotation on hover.
- Running animations without keyframes A new way to create animations without relying on keyframes.
- A new way to center block elements using place-self A modern way to center block elements using place-self instead of auto margin and max-width.
- Border-only breadcrumb shape using modern CSS A few lines of code to create a border-only breadcrumb shape that you can easily adjust.