Rotation animations add dynamic movement and visual interest by spinning elements around their center point. Use them for loading indicators, interactive elements, and playful transitions.
Fixed Angle Rotations rotate-90
rotate-180
rotate-360
Rotates element 90 degrees clockwise. < div class = "animate-rotate-90" > Quarter turn rotation </ div >
Rotation: 0° to 90°Duration: 1000msBest for: Accordion chevrons, dropdown arrows, expand/collapse indicatorsRotates element 180 degrees clockwise. < div class = "animate-rotate-180" > Half turn rotation </ div >
Rotation: 0° to 180°Duration: 1000msBest for: Flip indicators, toggle states, card flips (2D)Completes a full 360-degree rotation. < div class = "animate-rotate-360" > Full circle rotation </ div >
Rotation: 0° to 360°Duration: 1000ms (linear timing)Best for: Loading spinners, refresh buttons, completion indicatorsNote: Uses linear timing by default for smooth continuous motionContinuous Spinning
Continuous clockwise rotation. < div class = "animate-spin-clockwise animate-iteration-count-infinite" > Spins clockwise continuously </ div >
Rotation: 0° to 360° (repeating)Duration: 600ms per rotationBest for: Loading indicators, processing spinners, active state indicatorsUsage tip: Always combine with animate-iteration-count-infinite for continuous spinning
Continuous counter-clockwise rotation. < div class = "animate-spin-counter-clockwise animate-iteration-count-infinite" > Spins counter-clockwise continuously </ div >
Rotation: 0° to -360° (repeating)Duration: 600ms per rotationBest for: Reverse loading indicators, decorative elements, contrast with clockwise spinnersRotation with Opacity Element rotates into view while fading in. < div class = "animate-rotate-in" > Rotates from -90° while fading in </ div >
Animation:
Starts: opacity: 0; transform: rotate(-90deg)
Ends: opacity: 1; transform: rotate(0deg)
Duration: 600msBest for: Card entrances, icon reveals, modal contentElement rotates out of view while fading out. < div class = "animate-rotate-out" > Rotates to 90° while fading out </ div >
Animation:
Starts: opacity: 1; transform: rotate(0deg)
Ends: opacity: 0; transform: rotate(90deg)
Duration: 600msBest for: Dismissing elements with flair, exit animationsImpulse Rotations impulse-rotation-right Rotates with an initial counter-impulse before spinning right.
< div class = "animate-impulse-rotation-right" > Winds up left, then spins right </ div >
Animation sequence:
0%: rotate(0deg)
50%: rotate(-40deg) (wind-up)
100%: rotate(360deg) (full spin)
Duration: 1000msBest for: Playful button clicks, game elements, attention-grabbing spinsimpulse-rotation-left Rotates with an initial right-impulse before spinning left.
< div class = "animate-impulse-rotation-left" > Winds up right, then spins left </ div >
Animation sequence:
0%: rotate(0deg)
50%: rotate(40deg) (wind-up)
100%: rotate(-360deg) (full spin)
Duration: 1000msBest for: Alternative direction impulse, varied visual interestSubtle Rotation Effects rotational-wave Gentle back-and-forth rotation creating a wave effect.
< div class = "animate-rotational-wave animate-iteration-count-infinite" > Gently rocks back and forth </ div >
Animation sequence:
0%: rotate(0deg)
25%: rotate(10deg)
50%: rotate(-10deg)
75%: rotate(10deg)
100%: rotate(0deg)
Duration: 2000msBest for: Floating UI elements, decorative icons, subtle motion backgroundsCombined Animations slide-rotate-in Slides from left while rotating into view.
< div class = "animate-slide-rotate-in" > Slides and rotates into view </ div >
Animation:
Starts: opacity: 0; translateX(-20px) rotate(-90deg)
Ends: opacity: 1; translateX(0) rotate(0deg)
Duration: 600msBest for: Playful card entrances, creative transitionsslide-rotate-out Slides right while rotating out of view.
< div class = "animate-slide-rotate-out" > Rotates and slides out </ div >
Animation:
Starts: opacity: 1; translateX(0) rotate(0deg)
Ends: opacity: 0; translateX(20px) rotate(90deg)
Duration: 600msBest for: Dismissing elements with style, card exitsroll-in / roll-out See Movement & Motion animations for rolling animations that combine translation with rotation.
Customization Examples Fast Loading Spinner < div class = "animate-spin-clockwise animate-iteration-count-infinite animate-duration-fast" > 🔄 </ div >
Slow Decorative Spin < div class = "animate-rotate-360 animate-iteration-count-infinite animate-duration-slower" > ⭐ </ div >
Smooth Rotation with Easing < div class = "animate-rotate-180 animate-bezier-cubic-in-out animate-duration-normal" > Smooth flip </ div >
Alternating Rotation < div class = "animate-rotate-90 animate-iteration-count-infinite animate-direction-alternate animate-duration-slow" > Rotates back and forth </ div >
Continuous Wave Effect < div class = "animate-rotational-wave animate-iteration-count-infinite animate-duration-slower" > Gentle continuous wave </ div >
Practical Use Cases Loading Spinner < div class = "inline-flex items-center gap-2" > < svg class = "w-5 h-5 animate-spin-clockwise animate-iteration-count-infinite" viewBox = "0 0 24 24" > < circle class = "opacity-25" cx = "12" cy = "12" r = "10" stroke = "currentColor" stroke-width = "4" fill = "none" /> < path class = "opacity-75" fill = "currentColor" d = "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" /> </ svg > < span > Loading... </ span > </ div >
< button class = "p-2 hover:animate-rotate-360 hover:animate-duration-fast" > < svg class = "w-5 h-5" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" > < path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> </ svg > </ button >
Dropdown Arrow < button class = "flex items-center gap-2 group" > < span > Options </ span > < svg class = "w-4 h-4 transition-transform group-hover:animate-rotate-180" viewBox = "0 0 20 20" fill = "currentColor" > < path d = "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" /> </ svg > </ button >
Success Checkmark with Spin < div class = "w-16 h-16 rounded-full bg-green-500 flex items-center justify-center animate-rotate-360 animate-duration-normal" > < svg class = "w-10 h-10 text-white" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" > < path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "3" d = "M5 13l4 4L19 7" /> </ svg > </ div >
< button class = "px-6 py-3 bg-purple-500 text-white rounded-lg active:animate-impulse-rotation-right active:animate-duration-fast" > Spin Me! </ button >
< div class = "animate-rotate-360 timeline-scroll" > Rotates as you scroll </ div >
Floating Icon < div class = "animate-rotational-wave animate-iteration-count-infinite animate-duration-slower" > 💎 </ div >
Advanced Combinations Rotation with Scale < div class = "animate-rotate-360 hover:scale-110 transition-transform" > Rotates and scales on hover </ div >
Staggered Rotating Icons < div class = "flex gap-4" > < div class = "animate-rotate-360 animate-delay-0" > ⚙️ </ div > < div class = "animate-rotate-360 animate-delay-200" > ⚙️ </ div > < div class = "animate-rotate-360 animate-delay-400" > ⚙️ </ div > </ div >
Multiple Spinners < div class = "relative w-16 h-16" > <!-- Outer ring --> < div class = "absolute inset-0 border-4 border-blue-200 border-t-blue-500 rounded-full animate-spin-clockwise animate-iteration-count-infinite" ></ div > <!-- Inner ring --> < div class = "absolute inset-2 border-4 border-purple-200 border-t-purple-500 rounded-full animate-spin-counter-clockwise animate-iteration-count-infinite" ></ div > </ div >
Tips and Best Practices Use animate-iteration-count-infinite with spin animations for continuous motion.
The rotate-360 animation uses linear timing by default, making it perfect for loading spinners.
<!-- Loading spinner --> < div class = "animate-rotate-360 animate-iteration-count-infinite" > Natural continuous rotation </ div >
Be cautious with continuous rotation animations - they can be distracting. Use sparingly and only when indicating an active process.
Rotations happen around the element’s center by default. Control the rotation point with transform-origin:
<!-- Rotate around top-left corner --> < div class = "animate-rotate-90 origin-top-left" > Door swing effect </ div > <!-- Rotate around bottom --> < div class = "animate-rotate-180 origin-bottom" > Flip from bottom </ div >
Pausing on Hover < div class = "animate-spin-clockwise animate-iteration-count-infinite hover:animate-play-paused" > Pauses when you hover </ div >
Reversing Direction < div class = "animate-rotate-360 animate-direction-reverse animate-iteration-count-infinite" > Rotates counter-clockwise </ div >
Rotation uses transform: rotate() which is GPU-accelerated
Excellent performance on all modern devices
Safe to animate multiple elements simultaneously
Continuous infinite rotations are lightweight
Combining with other transforms (scale, translate) maintains good performance