Gathering detailed insights and metrics for tw-animate-css
Gathering detailed insights and metrics for tw-animate-css
Gathering detailed insights and metrics for tw-animate-css
Gathering detailed insights and metrics for tw-animate-css
TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`
npm install tw-animate-css
Typescript
Module System
Node Version
NPM Version
99.1
Supply Chain
92.7
Quality
93.6
Maintenance
100
Vulnerability
100
License
CSS (100%)
Total Downloads
5,638,112
Last Day
88,729
Last Week
898,927
Last Month
3,366,837
Last Year
5,638,112
MIT License
353 Stars
81 Commits
4 Forks
3 Watchers
6 Branches
5 Contributors
Updated on Jun 13, 2025
Minified
Minified + Gzipped
Latest Version
1.3.4
Package Id
tw-animate-css@1.3.4
Unpacked Size
29.26 kB
Size
6.12 kB
File Count
4
NPM Version
11.3.0
Node Version
24.1.0
Published on
Jun 04, 2025
Cumulative downloads
Total Downloads
Last Day
11.4%
88,729
Compared to previous day
Last Week
5.6%
898,927
Compared to previous week
Last Month
76.8%
3,366,837
Compared to previous month
Last Year
0%
5,638,112
Compared to previous year
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
. It embraces the new CSS-first architecture, 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.
Install the package with npm
:
1npm install -D tw-animate-css
Add the following line to your app.css
or globals.css
file:
1@import "tw-animate-css";
Start using the animations!
1<!-- Add an animated fade and zoom entrance --> 2<div class="animate-in fade-in zoom-in">...</div> 3 4<!-- Add an animated slide to top-left exit --> 5<div class="animate-out slide-out-to-top slide-out-to-left">...</div> 6 7<!-- Control animation duration --> 8<div class="... duration-300">...</div> 9 10<!-- Control animation delay --> 11<div class="... delay-150">...</div> 12 13<!-- And so much more! -->
ℹ️ 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 how it works and I'll update the documentation.
Download the tw-animate.css
file from GitHub and place it next to your app.css
or globals.css
file.
Add the following line to your app.css
or globals.css
file:
1@import "./tw-animate.css";
Start using the animations!
1<!-- Add an animated fade and zoom entrance --> 2<div class="animate-in fade-in zoom-in">...</div> 3 4<!-- Add an animated slide to top-left exit --> 5<div class="animate-out slide-out-to-top slide-out-to-left">...</div> 6 7<!-- Control animation duration --> 8<div class="... duration-300">...</div> 9 10<!-- Control animation delay --> 11<div class="... delay-150">...</div> 12 13<!-- And so much more! -->
To keep the README concise, I'll define a few variables:
<io>
: Specify the type of animation. This can be in
for enter or out
for exit animations.<dir>
: 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.Class | Description |
---|---|
animate-<io> | Base class for enter/exit animations. This needs to be applied in order for enter/exit animations to work. |
To customize the animation parameters, use the following classes:
Class | Description |
---|---|
duration-* | Sets animation-duration . Uses --tw-duration , see Tailwind CSS docs. Defaults to duration-150 . |
ease-* | Sets animation-timing-function . Uses --tw-ease , see Tailwind CSS docs. Defaults to ease-[ease] . |
delay-* | Sets animation-delay . Possible values: Any <number> , initial , or any other [<value>] . |
repeat-* | Sets animation-iteration-count . Possible values: Any <number> , infinite , initial or any other [<value>] . |
direction-* | Sets animation-direction . Possible values: normal , reverse , alternate , alternate-reverse , initial or any other [<value>] . |
fill-mode-* | Sets animation-fill-mode . Possible values: none , forwards , backwards , both , initial or any other [<value>] . |
running | Sets animation-play-state to running . |
paused | Sets animation-play-state to paused . |
play-state-* | Sets animation-play-state . Possible values: initial or any other [<value>] . |
Class | Description |
---|---|
fade-<io> | Fades the element in from or out to opacity: 0 . |
fade-<io>-* | Fades the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>] . |
zoom-<io> | Zooms the element in from or out to scale3D(0,0,0) . |
zoom-<io>-* | Zooms the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>] . |
spin-<io> | Spins the element in from or out to rotate(30deg) . |
spin-<io>-* | Spins the element in from or out to the specified value. Possible values: Any <number> (degrees) or any other [<value>] . |
slide-<dir> | Slides the element in from or out to the specified direction (100% ). |
slide-<dir>-* | Slides the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>] . |
Class | Description |
---|---|
accordion-down | Accordion down animation. Requires one of --radix-accordion-content-height , --bits-accordion-content-height , --reka-accordion-content-height or --kb-accordion-content-height to be set to the content's height. |
accordion-up | Accordion up animation. Requires one of --radix-accordion-content-height , --bits-accordion-content-height , --reka-accordion-content-height or --kb-accordion-content-height to be set to the content's height. |
collapsible-down | Collapsible down animation. Requires --radix-collapsible-content-height , --bits-collapsible-content-height , --reka-collapsible-content-height or --kb-collapsible-content-height to be set to the content's height. |
collapsible-up | Collapsible up animation. Requires --radix-collapsible-content-height , --bits-collapsible-content-height , --reka-collapsible-content-height or --kb-collapsible-content-height to be set to the content's height. |
caret-blink | 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:
1<div class="animate-in fade-in slide-in-from-top-8 duration-500"> 2 Fade in from 0% opacity,<br /> 3 slide from top by 8 spacing units (2rem),<br /> 4 with a 500ms duration. 5</div>
Advanced usage:
1<div 2 class="data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500" 3 data-state="show" 4> 5 <p> 6 If the element has the <code>data-state="show"</code> attribute,<br /> 7 fade in from 0% opacity,<br /> 8 slide from top by 8 spacing units (2rem),<br /> 9 with a 500ms duration. 10 </p> 11 <p> 12 If the element has the <code>data-state="hide"</code> attribute,<br /> 13 fade out to 0% opacity,<br /> 14 slide to top by 8 spacing units (2rem),<br /> 15 with a 500ms duration. 16 </p> 17</div>
ℹ️ 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.
No vulnerabilities found.
No security vulnerabilities found.