tailwindcss-animate

> A Tailwind CSS plugin for creating beautiful animations.

``html




`

Installation

Install the plugin from npm:

`sh
npm install -D tailwindcss-animate
`

Then add the plugin to your tailwind.config.js file:

`js
// @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

$3

#### Changing animation delay

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

`html
Button A
Button B
Button C
`

Learn more in the animation delay documentation.

#### Changing animation direction

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

`html
Button A
Button B
Button C
Button C
`

Learn more in the animation direction documentation.

#### Changing animation duration

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

`html
Button A
Button B
Button C
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
`

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.

`html
Button B
Button A
`

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.

`html
Button A
Button B
Button C
Button C
`

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:

`html
Button B
`

$3

$3

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.

`html
Button A
Button B
Button C
Button D
Button E
`

Learn more in the enter animation documentation.

$3

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.

`html
Button A
Button B
Button C
Button D
Button E
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
Button C
`

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.

`html
Button A
Button B
Button C
Button C
``

Learn more in the exit animation translate documentation.