TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.
npm install tw-animate-css
![MIT license]()
A collection of Tailwind CSS v4.0 utilities for creating beautiful animations. Includes ready-to-use animations accordion-down, accordion-up and caret-blink, as well as a set of utilities for creating your own animations.
---
This package is a replacement for [tailwindcss-animate][Original_Plugin_GitHub]. It embraces the new [CSS-first architecture][TailwindCSS_Custom_Utilities], providing a pure CSS solution for adding animation capabilities to your Tailwind CSS project without relying on the legacy JavaScript plugin system or having to define all keywords from scratch.
> [!WARNING]
> The upcoming release v2.0.0 will include breaking changes. A migration script and a guide will be provided to help you transition smoothly.
- Getting Started
- NPM
- Manual Download
- Usage
- Enter/Exit Animations
- Base Classes
- Parameter Classes
- Transform Classes
- Ready-to-Use Animations
- Examples
- Notes on Compatibility
1. Install the package with npm:
``sh`
npm install -D tw-animate-css
2. Add the following line to your app.css or globals.css file:
`css`
@import "tw-animate-css";
3. Start using the animations!
`html
...
`
> ℹ️ NOTE
> The above guide works for esbuild, Vite and probably other bundlers too. If you are using a different bundler, the syntax may differ. [Let me know][Create_Issue] how it works and I'll update the documentation.
1. Download the [tw-animate.css][CSS_File]app.css
file from GitHub and place it next to your or globals.css file.app.css
2. Add the following line to your or globals.css file:
`css`
@import "./tw-animate.css";
3. Start using the animations!
`html
...
`
To keep the README concise, I'll define a few variables:
- : Specify the type of animation. This can be in for enter or out for exit animations.
- : Specify the direction of the slide. This can be in-from-top, in-from-bottom, in-from-left, in-from-right, in-from-start, in-from-end, out-to-top, out-to-bottom, out-to-left, out-to-right, out-to-start, or out-to-end.*
- : Specify a value to apply. See list of possible values.
#### Base Classes
| Class | Description |
| ------------------------- | ---------------------------------------------------------------------------------------------------------- |
| [animate-][Docs_IO] | Base class for enter/exit animations. This needs to be applied in order for enter/exit animations to work. |
#### Parameter Classes
To customize the animation parameters, use the following classes:
| Class | Description |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [duration-*][Docs_Duration] | Sets [animation-duration][MDN_Duration]. Uses --tw-duration, see [Tailwind CSS docs][TailwindCSS_Duration]. Defaults to duration-150. |ease-*
| [][Docs_Ease] | Sets [animation-timing-function][MDN_Ease]. Uses --tw-ease, see [Tailwind CSS docs][TailwindCSS_Easing]. Defaults to ease-[ease]. |delay-*
| [][Docs_Delay] | Sets [animation-delay][MDN_Delay]. Possible values: Any , initial, or any other [. |repeat-*
| [][Docs_Repeat] | Sets [animation-iteration-count][MDN_Repeat]. Possible values: Any , infinite, initial or any other [. |direction-*
| [][Docs_Direction] | Sets [animation-direction][MDN_Direction]. Possible values: normal, reverse, alternate, alternate-reverse, initial or any other [. |fill-mode-*
| [][Docs_Fill_Mode] | Sets [animation-fill-mode][MDN_Fill_Mode]. Possible values: none, forwards, backwards, both, initial or any other [. |running
| [][Docs_Running] | Sets [animation-play-state][MDN_Play_State] to running. |paused
| [][Docs_Paused] | Sets [animation-play-state][MDN_Play_State] to paused. |play-state-*
| [][Docs_Play_State] | Sets [animation-play-state][MDN_Play_State]. Possible values: initial or any other [. |
#### Transform Classes
| Class | Description |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [blur-in-*][Docs_Blur] | Applies a blur effect on the element when it enters. Possible values: blur-in, blur-in-, blur-in-(, or blur-in-[. |blur-out-*
| [][Docs_Blur] | Applies a blur effect on the element when it exits. Possible values: blur-out, blur-out-, blur-out-(, or blur-out-[. |fade-
| [][Docs_Fade] | Fades the element in from or out to opacity: 0. |fade-
| [][Docs_Fade] | Fades the element in from or out to the specified value. Possible values: Any (percentage) or any other [. |zoom-
| [][Docs_Zoom] | Zooms the element in from or out to scale3D(0,0,0). |zoom-
| [][Docs_Zoom] | Zooms the element in from or out to the specified value. Possible values: Any (percentage) or any other [. |spin-
| [][Docs_Spin] | Spins the element in from or out to rotate(30deg). |spin-
| [][Docs_Spin] | Spins the element in from or out to the specified value. Possible values: Any (degrees) or any other [. |slide-
| [][Docs_Slide] | Slides the element in from or out to the specified direction (100%). |slide-
| [][Docs_Slide] | Slides the element in from or out to the specified value. Possible values: Any (percentage) or any other [. |
| Class | Description |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [accordion-down][Docs_Accordion] | Accordion down animation. Requires --radix-accordion-content-height or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height. |accordion-up
| [][Docs_Accordion] | Accordion up animation. Requires --radix-accordion-content-height or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height. |collapsible-down
| [][Docs_Collapsible] | Collapsible down animation. Requires --radix-collapsible-content-height or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height. |collapsible-up
| [][Docs_Collapsible] | Collapsible up animation. Requires --radix-collapsible-content-height or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height. |caret-blink
| [][Docs_Caret] | Blinking animation for caret/cursor. |
By the way, if you don't use some of the above animations, they will not be included in the final CSS file. This is because Tailwind CSS kind of does tree-shaking for you. So, if you don't use accordion-down, it won't be included in the final CSS file.
Basic usage:
`html`
Advanced usage:
`html
data-state="show"
>
If the element has the data-state="show" attribute,
fade in from 0% opacity,
slide from top by 8 spacing units (2rem),
with a 500ms duration.
If the element has the data-state="hide" attribute,
fade out to 0% opacity,
slide to top by 8 spacing units (2rem),
with a 500ms duration.
> ℹ️ NOTE
> I use only a small portion of the original plugin, so it might not be a 100% compatible drop-in replacement. If you notice any inconsistencies, feel free to contribute to this repository by opening a pull-request.
[Original_Plugin_GitHub]: https://github.com/jamiebuilds/tailwindcss-animate
[Original_Plugin_Docs]: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md
[TailwindCSS_Custom_Utilities]: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
[TailwindCSS_Duration]: https://tailwindcss.com/docs/transition-duration
[TailwindCSS_Easing]: https://tailwindcss.com/docs/transition-timing-function
[TailwindCSS_Delay]: https://tailwindcss.com/docs/transition-delay
[Docs_IO]: ./docs/animations/in-out.md
[Docs_Duration]: ./docs/parameters/animation-duration.md
[Docs_Ease]: ./docs/parameters/animation-timing-function.md
[Docs_Delay]: ./docs/parameters/animation-delay.md
[Docs_Repeat]: ./docs/parameters/animation-iteration-count.md
[Docs_Direction]: ./docs/parameters/animation-direction.md
[Docs_Fill_Mode]: ./docs/parameters/animation-fill-mode.md
[Docs_Running]: ./docs/parameters/animation-play-state.md#running
[Docs_Paused]: ./docs/parameters/animation-play-state.md#paused
[Docs_Play_State]: ./docs/parameters/animation-play-state.md#play-state-
[Docs_Blur]: ./docs/transforms/blur.md
[Docs_Fade]: ./docs/transforms/opacity.md
[Docs_Zoom]: ./docs/transforms/scale.md
[Docs_Spin]: ./docs/transforms/rotate.md
[Docs_Slide]: ./docs/transforms/translate.md
[Docs_Accordion]: ./docs/animations/accordion.md
[Docs_Accordion_Content_Height]: ./docs/animations/accordion.md#setting-content-height
[Docs_Collapsible]: ./docs/animations/collapsible.md
[Docs_Collapsible_Content_Height]: ./docs/animations/collapsible.md#setting-content-height
[Docs_Caret]: ./docs/animations/caret-blink.md
[MDN_Duration]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
[MDN_Ease]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
[MDN_Delay]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
[MDN_Repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
[MDN_Direction]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
[MDN_Fill_Mode]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
[MDN_Play_State]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
[Create_Issue]: https://github.com/Wombosvideo/tw-animate-css/issues/new
[CSS_File]: https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/refs/heads/main/src/tw-animate.css