Skip to main content
Animation classes apply predefined animations to elements. Each class applies a complete animation with default timing, duration, and fill mode.

​
Available Animations

All animation classes use the animate-* pattern and include predefined timing, duration, and fill modes.

​
Fade Animations

ClassDescriptionDefault Duration
animate-fade-inFades element in from transparent to opaque600ms
animate-fade-outFades element out from opaque to transparent600ms
animate-blurred-fade-inFades in with blur effect900ms
animate-fade-in-upFades in while moving up600ms
animate-fade-in-downFades in while moving down600ms
animate-fade-in-leftFades in while moving from right to left600ms
animate-fade-in-rightFades in while moving from left to right600ms
animate-fade-out-upFades out while moving up600ms
animate-fade-out-downFades out while moving down600ms
animate-fade-out-leftFades out while moving left600ms
animate-fade-out-rightFades out while moving right600ms
<div class="animate-fade-in">
  This element fades in
</div>

<div class="animate-blurred-fade-in animate-delay-200">
  This element fades in with blur and a 200ms delay
</div>

​
Slide Animations

ClassDescriptionDefault Duration
animate-slide-in-topSlides in from the top600ms
animate-slide-in-bottomSlides in from the bottom600ms
animate-slide-in-leftSlides in from the left600ms
animate-slide-in-rightSlides in from the right600ms
animate-slide-out-topSlides out to the top600ms
animate-slide-out-bottomSlides out to the bottom600ms
animate-slide-out-leftSlides out to the left600ms
animate-slide-out-rightSlides out to the right600ms
animate-slide-up-fadeSlides up while fading in600ms
<div class="animate-slide-in-top">
  Slides in from top
</div>

<button class="animate-slide-in-left animate-duration-400">
  Slides in faster from left
</button>

​
Zoom & Scale Animations

ClassDescriptionDefault Duration
animate-zoom-inZooms in from 50% to 100% scale with fade600ms
animate-zoom-outZooms out from 100% to 50% scale with fade600ms
animate-scaleScales element to 110%600ms
animate-popQuick pop effect (scale up and down)600ms
<div class="animate-zoom-in">
  Zooms into view
</div>

​
Rotation Animations

ClassDescriptionDefault Duration
animate-rotate-90Rotates 90 degrees clockwise1000ms
animate-rotate-180Rotates 180 degrees clockwise1000ms
animate-rotate-360Rotates 360 degrees clockwise1000ms
animate-spin-clockwiseSpins 360 degrees clockwise600ms
animate-spin-counter-clockwiseSpins 360 degrees counter-clockwise600ms
animate-rotate-inRotates in from -90 degrees with fade600ms
animate-rotate-outRotates out to 90 degrees with fade600ms
animate-slide-rotate-inSlides and rotates in600ms
animate-slide-rotate-outSlides and rotates out600ms
animate-impulse-rotation-rightImpulse rotation to the right1000ms
animate-impulse-rotation-leftImpulse rotation to the left1000ms
<div class="animate-rotate-360 animate-iteration-count-infinite">
  Rotates continuously
</div>

​
Flip Animations

ClassDescriptionDefault Duration
animate-flip-horizontalFlips horizontally 180 degrees1000ms
animate-flip-verticalFlips vertically 180 degrees1000ms
animate-flip-xFlips on X-axis600ms
animate-flip-yFlips on Y-axis600ms
animate-flip-in-xFlips in on X-axis with fade600ms
animate-flip-in-yFlips in on Y-axis with fade600ms
animate-flip-out-xFlips out on X-axis with fade600ms
animate-flip-out-yFlips out on Y-axis with fade600ms
<div class="animate-flip-horizontal hover:animate-flip-vertical">
  Flip on hover
</div>

​
Bounce & Movement Animations

ClassDescriptionDefault Duration
animate-bouncingBounces up and down1000ms
animate-vertical-bounceVertical bouncing motion600ms
animate-horizontal-bounceHorizontal bouncing motion600ms
animate-jumpJumps up and returns1000ms
animate-hangHangs and drops1000ms
animate-floatGentle floating motion1000ms
animate-sinkGentle sinking motion1000ms
animate-bounce-fade-inBounces while fading in600ms
<div class="animate-bouncing animate-iteration-count-infinite">
  Bounces forever
</div>

​
Shake & Wobble Animations

ClassDescriptionDefault Duration
animate-shakeShakes horizontally500ms
animate-wobbleWobbles back and forth1000ms
animate-swingSwings like a pendulum1000ms
animate-swayGentle swaying motion600ms
animate-jiggleSmall rotation jiggle500ms
animate-horizontal-vibrationRapid horizontal vibration300ms (infinite)
animate-rotational-waveRotational waving motion2000ms (infinite)
<button class="hover:animate-shake">
  Shake on hover
</button>

​
Pulse & Flash Animations

ClassDescriptionDefault Duration
animate-pulsePulses opacity continuously2000ms (infinite)
animate-pulsingPulses scale continuously1000ms
animate-pulse-fade-inPulses while fading in600ms
animate-flashFlashes visibility1000ms
animate-blinkBlinks from transparent to opaque500ms
animate-heartbeatHeartbeat pulsing effect600ms
<div class="animate-pulse">
  Pulses continuously
</div>

​
Special Effect Animations

ClassDescriptionDefault Duration
animate-tadaCelebratory tada effect1000ms
animate-rubber-bandRubber band stretching effect1000ms
animate-jellyJelly wobble effect1000ms
animate-roll-inRolls in from the left1000ms
animate-roll-outRolls out to the right1000ms
animate-swing-drop-inSwings and drops into view600ms
animate-skewSkews element500ms
animate-skew-rightSkews element to the right500ms
animate-tiltTilts on Y-axis600ms
animate-squeezeSqueezes element600ms
animate-dancingDancing skew motion1000ms
<div class="animate-tada">
  Celebrate!
</div>

​
Expand & Contract Animations

ClassDescriptionDefault Duration
animate-expand-horizontallyExpands horizontally from 0 to 100%600ms
animate-contract-horizontallyContracts horizontally from 100% to 0600ms
animate-expand-verticallyExpands vertically from 0 to 100%600ms
animate-contract-verticallyContracts vertically from 100% to 0600ms
<div class="animate-expand-horizontally">
  Expands into view
</div>

​
Combining with Control Classes

Animation classes can be combined with duration, delay, iteration, and timing function classes: 
<div class="animate-fade-in animate-duration-1000 animate-delay-500">
  Fades in slowly after a delay
</div>

<div class="animate-bouncing animate-iteration-count-infinite animate-bezier-ease-in-out">
  Bounces continuously with custom easing
</div>

<div class="animate-rotate-360 animate-direction-reverse animate-fill-mode-forwards">
  Rotates backwards and stays at end state
</div>

​
Notes

  • All animations include default timing functions optimized for their motion type
  • Most animations use both as the default fill mode to maintain start and end states
  • Some animations like animate-pulse and animate-horizontal-vibration are infinite by default
  • Override default durations using animate-duration-* classes
  • Add delays using animate-delay-* classes
  • Control repetition using animate-iteration-count-* classes

​
Browser Compatibility

All animation classes are compatible with modern browsers that support CSS animations:
  • Chrome 43+
  • Firefox 16+
  • Safari 9+
  • Edge 12+
For scroll-driven animations (used with timeline classes), see the Timeline Classes reference for specific browser requirements.

Build docs developers (and LLMs) love

Get started for freeTalk to us