tailwind-animate

tailwind-animate

A v4.0 compatible Tailwind CSS plugin for creating beautiful animations, replacing tailwindcss-animate. Includes custom animations like accordion-up and accordion-down, and more!

Instead of being an old-fashioned JavaScript plugin, this package provides a CSS file defining custom utilities based on the new CSS-first architecture.

Installation

NPM

• Install the package with npm:

  npm install -D tailwind-animate
  

• Add the following line to your app.css or globals.css file, and remove the @plugin "tailwindcss-animate" line if it exists:

  @import "tailwindcss"
  + @import "tailwind-animate"
  - @plugin "tailwindcss-animate"
  

• Start using the animations!

  <!-- Add an animated fade and zoom entrance -->
  <div class="animate-in fade-in zoom-in">...</div>
  
  <!-- Add an animated slide to top-left exit -->
  <div class="animate-out slide-out-to-top slide-out-to-left">...</div>
  
  <!-- Control animation duration -->
  <div class="... duration-300">...</div>
  
  <!-- Control animation delay -->
  <div class="... delay-150">...</div>
  
  <!-- And so much more! -->
  

Manual download

• Download the tailwind-animate.css file from GitHub and place it next to your app.css.

• Add the following line to your app.css or globals.css file:

  @import "./tailwind-animate.css";
  

• Start using the animations!

  <!-- Add an animated fade and zoom entrance -->
  <div class="animate-in fade-in zoom-in">...</div>
  
  <!-- Add an animated slide to top-left exit -->
  <div class="animate-out slide-out-to-top slide-out-to-left">...</div>
  
  <!-- Control animation duration -->
  <div class="... duration-300">...</div>
  
  <!-- Control animation delay -->
  <div class="... delay-150">...</div>
  
  <!-- And so much more! -->
  

Optional: Reduce Lines of Code

• If your project already includes the following lines for accordion-up and accordion-down, you can remove them from the global.css file:

  -  --animate-accordion-down: accordion-down 0.2s ease-out;
  -  --animate-accordion-up: accordion-up 0.2s ease-out;
  -
  -  @keyframes accordion-down {
  -    from {
  -      height: 0;
  -    }
  -    to {
  -      height: var(--radix-accordion-content-height);
  -    }
  -  }
  -
  -  @keyframes accordion-up {
  -    from {
  -      height: var(--radix-accordion-content-height);
  -    }
  -    to {
  -      height: 0;
  -    }
  -  }
  

Credits

This project is built on top of tw-animate-css, which migrated the original tailwindcss-animate plugin to the new CSS-first architecture.

Documentation

• Basic Usage
  • Changing animation delay
  • Changing animation direction
  • Changing animation duration
  • Changing animation fill mode
  • Changing animation iteration count
  • Changing animation play state
  • Changing animation timing function
  • Prefers-reduced-motion
• Enter & Exit Animations
  • Adding enter animations
  • Adding exit animations
  • Changing enter animation starting opacity
  • Changing enter animation starting rotation
  • Changing enter animation starting scale
  • Changing enter animation starting translate
  • Changing exit animation ending opacity
  • Changing exit animation ending rotation
  • Changing exit animation ending scale
  • Changing exit animation ending translate

Basic Usage

Changing animation delay

Use the delay-{amount} utilities to control an element’s animation-delay.

<button class="animate-bounce delay-150 duration-300 ...">Button A</button>
<button class="animate-bounce delay-300 duration-300 ...">Button B</button>
<button class="animate-bounce delay-700 duration-300 ...">Button C</button>

Learn more in the animation delay documentation.

Changing animation direction

Use the direction-{keyword} utilities to control an element’s animation-delay.

<button class="animate-bounce direction-normal ...">Button A</button>
<button class="animate-bounce direction-reverse ...">Button B</button>
<button class="animate-bounce direction-alternate ...">Button C</button>
<button class="animate-bounce direction-alternate-reverse ...">Button C</button>

Learn more in the animation direction documentation.

Changing animation duration

Use the duration-{amount} utilities to control an element’s animation-duration.

<button class="animate-bounce duration-150 ...">Button A</button>
<button class="animate-bounce duration-300 ...">Button B</button>
<button class="animate-bounce duration-700 ...">Button C</button>

Learn more in the animation duration documentation.

Changing animation fill mode

Use the fill-mode-{keyword} utilities to control an element’s animation-fill-mode.

<button class="animate-bounce fill-mode-none ...">Button A</button>
<button class="animate-bounce fill-mode-forwards ...">Button B</button>
<button class="animate-bounce fill-mode-backwards ...">Button C</button>
<button class="animate-bounce fill-mode-both ...">Button C</button>

Learn more in the animation fill mode documentation.

Changing animation iteration count

Use the repeat-{amount} utilities to control an element’s animation-iteration-count.

<button class="animate-bounce repeat-0 ...">Button A</button>
<button class="animate-bounce repeat-1 ...">Button B</button>
<button class="animate-bounce repeat-infinite ...">Button C</button>

Learn more in the animation iteration count documentation.

Changing animation play state

Use the running and paused utilities to control an element’s animation-play-state.

<button class="animate-bounce running ...">Button B</button>
<button class="animate-bounce paused ...">Button A</button>

Learn more in the animation play state documentation.

Changing animation timing function

Use the ease-{keyword} utilities to control an element’s animation-timing-function.

<button class="animate-bounce ease-linear ...">Button A</button>
<button class="animate-bounce ease-in ...">Button B</button>
<button class="animate-bounce ease-out ...">Button C</button>
<button class="animate-bounce ease-in-out ...">Button C</button>

Learn more in the animation timing function documentation.

Prefers-reduced-motion

For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

<button class="motion-safe:animate-bounce ...">Button B</button>

Enter & Exit Animations

Adding enter animations

To give an element an enter animation, use the animate-in utility, in combination with some fade-in, spin-in, zoom-in, and slide-in-from utilities.

<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in spin-in ...">Button B</button>
<button class="animate-in zoom-in ...">Button C</button>
<button class="animate-in slide-in-from-top ...">Button D</button>
<button class="animate-in slide-in-from-left ...">Button E</button>

Learn more in the enter animation documentation.

Adding exit animations

To give an element an exit animation, use the animate-out utility, in combination with some fade-out, spin-out, zoom-out, and slide-out-from utilities.

<button class="animate-out fade-out ...">Button A</button>
<button class="animate-out spin-out ...">Button B</button>
<button class="animate-out zoom-out ...">Button C</button>
<button class="animate-out slide-out-from-top ...">Button D</button>
<button class="animate-out slide-out-from-left ...">Button E</button>

Learn more in the exit animation documentation.

Changing enter animation starting opacity

Set the starting opacity of an animation using the fade-in-{amount} utilities.

<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in fade-in-25 ...">Button B</button>
<button class="animate-in fade-in-50 ...">Button C</button>
<button class="animate-in fade-in-75 ...">Button C</button>

Learn more in the enter animation opacity documentation.

Changing enter animation starting rotation

Set the starting rotation of an animation using the spin-in-{amount} utilities.

<button class="animate-in spin-in-1 ...">Button A</button>
<button class="animate-in spin-in-6 ...">Button B</button>
<button class="animate-in spin-in-75 ...">Button C</button>
<button class="animate-in spin-in-90 ...">Button C</button>

Learn more in the enter animation rotate documentation.

Changing enter animation starting scale

Set the starting scale of an animation using the zoom-in-{amount} utilities.

<button class="animate-in zoom-in ...">Button A</button>
<button class="animate-in zoom-in-50 ...">Button B</button>
<button class="animate-in zoom-in-75 ...">Button C</button>
<button class="animate-in zoom-in-95 ...">Button C</button>

Learn more in the enter animation scale documentation.

Changing enter animation starting translate

Set the starting translate of an animation using the slide-in-from-{direction}-{amount} utilities.

<button class="animate-in slide-in-from-top ...">Button A</button>
<button class="animate-in slide-in-from-bottom-48 ...">Button B</button>
<button class="animate-in slide-in-from-left-72 ...">Button C</button>
<button class="animate-in slide-in-from-right-96 ...">Button C</button>

Learn more in the enter animation translate documentation.

Changing exit animation ending opacity

Set the ending opacity of an animation using the fade-out-{amount} utilities.

<button class="animate-out fade-out ...">Button A</button>
<button class="animate-out fade-out-25 ...">Button B</button>
<button class="animate-out fade-out-50 ...">Button C</button>
<button class="animate-out fade-out-75 ...">Button C</button>

Learn more in the exit animation opacity documentation.

Changing exit animation ending rotation

Set the ending rotation of an animation using the spin-out-{amount} utilities.

<button class="animate-out spin-out-1 ...">Button A</button>
<button class="animate-out spin-out-6 ...">Button B</button>
<button class="animate-out spin-out-75 ...">Button C</button>
<button class="animate-out spin-out-90 ...">Button C</button>

Learn more in the exit animation rotate documentation.

Changing exit animation ending scale

Set the ending scale of an animation using the zoom-out-{amount} utilities.

<button class="animate-out zoom-out ...">Button A</button>
<button class="animate-out zoom-out-50 ...">Button B</button>
<button class="animate-out zoom-out-75 ...">Button C</button>
<button class="animate-out zoom-out-95 ...">Button C</button>

Learn more in the exit animation scale documentation.

Changing exit animation ending translate

Set the ending translate of an animation using the slide-out-to-{direction}-{amount} utilities.

<button class="animate-out slide-out-to-top ...">Button A</button>
<button class="animate-out slide-out-to-bottom-48 ...">Button B</button>
<button class="animate-out slide-out-to-left-72 ...">Button C</button>
<button class="animate-out slide-out-to-right-96 ...">Button C</button>

Learn more in the exit animation translate documentation.