Package Exports

tailwindcss-animate
tailwindcss-animate/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-animate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`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'),
    // ...
  ],
}

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, zoom-in, and slide-in-from utilities.

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

Learn more in the enter animation documentation.

Adding exit animations

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

<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in zoom-in ...">Button B</button>
<button class="animate-in slide-in-from-top ...">Button C</button>
<button class="animate-in slide-in-from-left ...">Button D</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 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-50 ...">Button B</button>
<button class="animate-in slide-in-from-left-75 ...">Button C</button>
<button class="animate-in slide-in-from-right-95 ...">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 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-50 ...">Button B</button>
<button class="animate-out slide-out-to-left-75 ...">Button C</button>
<button class="animate-out slide-out-to-right-95 ...">Button C</button>

Learn more in the exit animation translate documentation.