tailwindcss-animate
A Tailwind CSS plugin for creating beautiful 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! -->
Installation
Install the plugin from npm:
npm install -D tailwindcss-animate
Then add the plugin to your tailwind.config.js file:
// @filename tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-animate"),
// ...
],
}
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.
/tailwindcss-animate