Movement animations add life and personality to your interfaces with natural motion patterns like bouncing, floating, swaying, and wobbling. These animations create engaging, dynamic experiences.
Bounce Animations bouncing
vertical-bounce
horizontal-bounce
Simple vertical bounce. < div class = "animate-bouncing" > Bounces up and down </ div >
Motion: Moves 10px up at midpoint, returns to startDuration: 1000msBest for: Attention indicators, playful elements, call-to-action buttonsMore pronounced vertical bouncing motion. < div class = "animate-vertical-bounce" > Stronger vertical bounce (20px) </ div >
Motion: Bounces 20px up and downDuration: 600msBest for: Loading indicators, active state markers, emphasizing elementsBounces left and right horizontally. < div class = "animate-horizontal-bounce" > Bounces 20px side to side </ div >
Motion: Moves 20px right at midpoint, returns to startDuration: 600msBest for: Directional indicators, navigation cues, playful UI elementsbounce-fade-in Combines bouncing entrance with fade effect.
< div class = "animate-bounce-fade-in" > Bounces from 0.5x scale while fading in </ div >
Animation: Scales from 0.5 to 1.0 while fading from transparent to opaqueDuration: 600msBest for: Success messages, celebration effects, modal entrancesFloating & Sinking
Gentle upward and downward floating motion. < div class = "animate-float animate-iteration-count-infinite" > Softly floats up 10px and down </ div >
Motion: Smoothly moves 10px up and returnsDuration: 1000msBest for: Floating badges, decorative elements, call-out boxesTip: Always use with animate-iteration-count-infinite for continuous floating
Gentle downward and upward sinking motion. < div class = "animate-sink animate-iteration-count-infinite" > Softly sinks down 10px and returns </ div >
Motion: Smoothly moves 10px down from elevated position and returnsDuration: 1000msBest for: Opposite of float, alternative floating effectJump & Hang Quick upward jump motion. < div class = "animate-jump" > Jumps 20px up and lands </ div >
Motion: Quick 20px upward movement and returnDuration: 1000msBest for: Button feedback, playful interactions, game elementsHanging/suspended motion effect. < div class = "animate-hang animate-iteration-count-infinite" > Hangs and drops repeatedly </ div >
Motion: Starts 20px up, drops down, returns upDuration: 1000msBest for: Suspended elements, decorative motion, attention grabbersPendulum Motions
Pendulum-like swinging rotation. < div class = "animate-swing animate-iteration-count-infinite" > Swings like a pendulum (±15°) </ div >
Rotation: 0° → 15° → 0°Duration: 1000msBest for: Hanging signs, decorative elements, notification badges
Gentle swaying motion. < div class = "animate-sway animate-iteration-count-infinite" > Gently sways (±15°) </ div >
Rotation: 0° → 15° → 0°Duration: 600msBest for: Tree-like elements, subtle motion backgrounds, decorative itemsShake & Wobble Rapid horizontal shaking. < div class = "animate-shake" > Shakes horizontally (±10px) </ div >
Motion: Quick left-right-left-right tremorDuration: 500msBest for: Error indicators, invalid input feedback, attention grabbingIrregular oscillating motion. < div class = "animate-wobble" > Complex wobbling motion </ div >
Motion: Irregular horizontal oscillation (±20px, ±15%, ±5%)Duration: 1000msBest for: Unstable elements, jello effects, playful animationsQuick rotational jiggling. < div class = "animate-jiggle animate-iteration-count-infinite" > Jiggles with rotation (±3°) </ div >
Rotation: -3° → 3° → -3°Duration: 500msBest for: Notification bells, alert icons, attention indicatorsVibration Effects horizontal-vibration Rapid horizontal vibrating motion.
< div class = "animate-horizontal-vibration" > Vibrates horizontally (±5px) </ div >
Motion: Very rapid left-right vibrationDuration: 300ms (usually with infinite iteration)Best for: Notification alerts, error states, incoming message indicatorsNote: Comes with infinite iteration by defaultRolling Animations
Rolls into view from the left. < div class = "animate-roll-in" > Rolls and slides in from left </ div >
Animation: Starts at translateX(-20px) rotate(-120deg), ends at original positionDuration: 1000msBest for: Playful entrances, game elements, ball-like objects
Rolls out of view to the right. < div class = "animate-roll-out" > Rolls and slides out to right </ div >
Animation: Ends at translateX(20px) rotate(120deg)Duration: 1000msBest for: Dismissing elements with flair, playful exitsTilt & Squeeze 3D tilting motion around Y-axis. < div class = "animate-tilt animate-iteration-count-infinite" > Tilts in 3D (±20° Y-axis) </ div >
Rotation: rotateY(0°) → rotateY(20°) → rotateY(0°)Duration: 600msBest for: 3D card effects, interactive elements, showcase itemsCompression and expansion effect. < div class = "animate-squeeze animate-iteration-count-infinite" > Squeezes horizontally and vertically </ div >
Scale: scale(1, 1) → scale(1.1, 0.9) → scale(1, 1)Duration: 600msBest for: Elastic elements, playful buttons, squishy effectsSpecial Movement Effects swing-drop-in Element swings and drops into position.
< div class = "animate-swing-drop-in" > Swings down from above </ div >
Animation: Starts at rotate(-30deg) translateY(-50px) with fadeDuration: 600msBest for: Dramatic entrances, modal reveals, suspended element dropsdancing Playful dancing skew effect.
< div class = "animate-dancing animate-iteration-count-infinite" > Dances with skew motion </ div >
Animation: Skews between ±40° creating a dance-like effectDuration: 1000msBest for: Fun UI elements, party modes, celebration statesCustomization Examples Continuous Floating Badge < div class = "relative" > < span class = "absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center animate-float animate-iteration-count-infinite animate-duration-slow" > 3 </ span > </ div >
Error Shake < input class = "border-2 border-red-500 animate-shake" type = "text" placeholder = "Invalid input!" />
Bouncing Loading Dots < div class = "flex gap-2" > < div class = "w-3 h-3 bg-blue-500 rounded-full animate-bouncing animate-delay-0 animate-iteration-count-infinite" ></ div > < div class = "w-3 h-3 bg-blue-500 rounded-full animate-bouncing animate-delay-200 animate-iteration-count-infinite" ></ div > < div class = "w-3 h-3 bg-blue-500 rounded-full animate-bouncing animate-delay-400 animate-iteration-count-infinite" ></ div > </ div >
Floating Call-to-Action < button class = "bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-full animate-float animate-iteration-count-infinite animate-duration-slower" > Get Started </ button >
Notification Bell < button class = "relative" > < span class = "text-2xl animate-jiggle animate-iteration-count-infinite" > 🔔 </ span > < span class = "absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full" ></ span > </ button >
Practical Use Cases Loading Indicator < div class = "flex items-center gap-3" > < div class = "w-12 h-12 border-4 border-gray-200 border-t-blue-500 rounded-full animate-bouncing animate-iteration-count-infinite" ></ div > < span > Loading... </ span > </ div >
< button class = "bg-yellow-400 px-6 py-3 rounded-lg font-bold animate-wobble animate-iteration-count-infinite animate-duration-slower" > 🎉 Limited Time Offer! </ button >
Incoming Message < div class = "bg-white rounded-lg shadow-lg p-4 animate-slide-in-right animate-horizontal-vibration" > < p class = "font-semibold" > New Message </ p > < p class = "text-sm text-gray-600" > You have a new notification </ p > </ div >
Playful 404 Element < div class = "text-9xl animate-wobble animate-iteration-count-infinite animate-duration-slow" > 404 </ div >
Suspended Badge < div class = "inline-block animate-swing animate-iteration-count-infinite animate-duration-slower" > < span class = "bg-green-500 text-white px-3 py-1 rounded-full text-sm" > New </ span > </ div >
Advanced Combinations Multi-Direction Wobble < div class = "animate-wobble animate-vertical-bounce animate-iteration-count-infinite animate-duration-slow" > Complex motion </ div >
Staggered Bounce Effect < div class = "flex gap-4" > < div class = "w-16 h-16 bg-blue-500 rounded animate-bouncing animate-iteration-count-infinite animate-delay-0" ></ div > < div class = "w-16 h-16 bg-blue-500 rounded animate-bouncing animate-iteration-count-infinite animate-delay-200" ></ div > < div class = "w-16 h-16 bg-blue-500 rounded animate-bouncing animate-iteration-count-infinite animate-delay-400" ></ div > </ div >
Floating with Rotation < div class = "animate-float animate-rotational-wave animate-iteration-count-infinite animate-duration-slower" > 💎 Floating gem </ div >
Tips and Best Practices Use infinite iterations for continuous motion effects like floating, swinging, and jiggling.
< div class = "animate-float animate-iteration-count-infinite" > Continuously floats </ div >
Combine movement animations with delays to create staggered, wave-like effects across multiple elements.
Avoid overusing shake and vibration animations as they can be jarring and distracting.
Respect user preferences for reduced motion. Consider disabling continuous animations for users who prefer reduced motion.
Subtle vs. Pronounced Motion <!-- Subtle floating --> < div class = "animate-float animate-duration-slower animate-iteration-count-infinite" > Gentle motion </ div > <!-- Pronounced bouncing --> < div class = "animate-vertical-bounce animate-duration-fast animate-iteration-count-infinite" > Energetic motion </ div >
Pausing on Interaction < div class = "animate-swing animate-iteration-count-infinite hover:animate-play-paused" > Pauses when you hover </ div >
Most movement animations use transform properties (GPU-accelerated)
Excellent performance on modern devices
Be cautious with infinite animations on mobile (battery impact)
Limit the number of simultaneously animated elements
Consider using prefers-reduced-motion media query for accessibility