\n\n\n```\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D tailwindcss-animate\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// @filename tailwind.config.js\nmodule.exports = {\n\ttheme: {\n\t\t// ...\n\t},\n\tplugins: [\n\t\trequire(\"tailwindcss-animate\"),\n\t\t// ...\n\t],\n}\n```\n\n## Documentation\n\n- [`tailwindcss-animate`](#tailwindcss-animate)\n - [Installation](#installation)\n - [Documentation](#documentation)\n - [Basic Usage](#basic-usage)\n - [Changing animation delay](#changing-animation-delay)\n - [Changing animation direction](#changing-animation-direction)\n - [Changing animation duration](#changing-animation-duration)\n - [Changing animation fill mode](#changing-animation-fill-mode)\n - [Changing animation iteration count](#changing-animation-iteration-count)\n - [Changing animation play state](#changing-animation-play-state)\n - [Changing animation timing function](#changing-animation-timing-function)\n - [Prefers-reduced-motion](#prefers-reduced-motion)\n - [Enter \\& Exit Animations](#enter--exit-animations)\n - [Adding enter animations](#adding-enter-animations)\n - [Adding exit animations](#adding-exit-animations)\n - [Changing enter animation starting opacity](#changing-enter-animation-starting-opacity)\n - [Changing enter animation starting rotation](#changing-enter-animation-starting-rotation)\n - [Changing enter animation starting scale](#changing-enter-animation-starting-scale)\n - [Changing enter animation starting translate](#changing-enter-animation-starting-translate)\n - [Changing exit animation ending opacity](#changing-exit-animation-ending-opacity)\n - [Changing exit animation ending rotation](#changing-exit-animation-ending-rotation)\n - [Changing exit animation ending scale](#changing-exit-animation-ending-scale)\n - [Changing exit animation ending translate](#changing-exit-animation-ending-translate)\n\n### Basic Usage\n\n#### Changing animation delay\n\nUse the `delay-{amount}` utilities to control an element’s `animation-delay`.\n\n```html\n\n\n\n```\n\nLearn more in the [animation delay](/docs/animation-delay.md) documentation.\n\n#### Changing animation direction\n\nUse the `direction-{keyword}` utilities to control an element’s `animation-delay`.\n\n```html\n\n\n\n\n```\n\nLearn more in the [animation direction](/docs/animation-direction.md) documentation.\n\n#### Changing animation duration\n\nUse the `animation-duration-{amount}` utilities to control an element’s `animation-duration`.\n\n```html\n\n\n\n```\n\nLearn more in the [animation duration](/docs/animation-duration.md) documentation.\n\n#### Changing animation fill mode\n\nUse the `fill-mode-{keyword}` utilities to control an element’s `animation-fill-mode`.\n\n```html\n\n\n\n\n```\n\nLearn more in the [animation fill mode](/docs/animation-fill-mode.md) documentation.\n\n#### Changing animation iteration count\n\nUse the `repeat-{amount}` utilities to control an element’s `animation-iteration-count`.\n\n```html\n\n\n\n```\n\nLearn more in the [animation iteration count](/docs/animation-iteration-count.md) documentation.\n\n#### Changing animation play state\n\nUse the `running` and `paused` utilities to control an element’s `animation-play-state`.\n\n```html\n\n\n```\n\nLearn more in the [animation play state](/docs/animation-play-state.md) documentation.\n\n#### Changing animation timing function\n\nUse the `ease-{keyword}` utilities to control an element’s `animation-timing-function`.\n\n```html\n\n\n\n\n```\n\nLearn more in the [animation timing function](/docs/animation-timing-function.md) documentation.\n\n#### Prefers-reduced-motion\n\nFor 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:\n\n```html\n\n```\n\n### Enter & Exit Animations\n\n### Adding enter animations\n\nTo give an element an enter animation, use the `animate-in` utility, in combination with some [`fade-in`](/docs/enter-animation-scale.md), [`spin-in`](/docs/enter-animation-rotate.md), [`zoom-in`](/docs/enter-animation-scale.md), and [`slide-in-from`](/docs/enter-animation-translate.md) utilities.\n\n```html\n\n\n\n\n\n```\n\nLearn more in the [enter animation](/docs/enter-animation.md) documentation.\n\n### Adding exit animations\n\nTo give an element an exit animation, use the `animate-out` utility, in combination with some [`fade-out`](/docs/exit-animation-scale.md), [`spin-out`](/docs/exit-animation-rotate.md), [`zoom-out`](/docs/exit-animation-scale.md), and [`slide-out-from`](/docs/exit-animation-translate.md) utilities.\n\n```html\n\n\n\n\n\n```\n\nLearn more in the [exit animation](/docs/exit-animation.md) documentation.\n\n#### Changing enter animation starting opacity\n\nSet the starting opacity of an animation using the `fade-in-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [enter animation opacity](/docs/enter-animation-opacity.md) documentation.\n\n#### Changing enter animation starting rotation\n\nSet the starting rotation of an animation using the `spin-in-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [enter animation rotate](/docs/enter-animation-rotate.md) documentation.\n\n#### Changing enter animation starting scale\n\nSet the starting scale of an animation using the `zoom-in-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [enter animation scale](/docs/enter-animation-scale.md) documentation.\n\n#### Changing enter animation starting translate\n\nSet the starting translate of an animation using the `slide-in-from-{direction}-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [enter animation translate](/docs/enter-animation-translate.md) documentation.\n\n#### Changing exit animation ending opacity\n\nSet the ending opacity of an animation using the `fade-out-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [exit animation opacity](/docs/exit-animation-opacity.md) documentation.\n\n#### Changing exit animation ending rotation\n\nSet the ending rotation of an animation using the `spin-out-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [exit animation rotate](/docs/exit-animation-rotate.md) documentation.\n\n#### Changing exit animation ending scale\n\nSet the ending scale of an animation using the `zoom-out-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [exit animation scale](/docs/exit-animation-scale.md) documentation.\n\n#### Changing exit animation ending translate\n\nSet the ending translate of an animation using the `slide-out-to-{direction}-{amount}` utilities.\n\n```html\n\n\n\n\n```\n\nLearn more in the [exit animation translate](/docs/exit-animation-translate.md) documentation.\n","readmeFilename":"README.md"}