frontend-admin / Daocheng-Yading

Name Last Update
..
dist Loading commit data...
LICENSE Loading commit data...
README.md Loading commit data...
package.json Loading commit data...

README.md

tw-animate-css

npm version npm downloads MIT license GitHub stars

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 <code>tailwindcss-animate</code>. 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.

[!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.

Table of Contents

Getting Started

NPM

  1. Install the package with npm:
   npm install -D tw-animate-css
  1. Add the following line to your app.css or globals.css file:
   @import "tw-animate-css";
  1. Start using the 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! -->

ℹ️ 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.

Manual Download

  1. Download the <code>tw-animate.css</code> file from GitHub and place it next to your app.css or globals.css file.
  2. Add the following line to your app.css or globals.css file:
   @import "./tw-animate.css";
  1. Start using the 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! -->

Usage

Enter/Exit Animations

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.

Base Classes

Class Description
<code>animate-<io></code> 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
<code>duration-*</code> Sets <code>animation-duration</code>. Uses --tw-duration, see Tailwind CSS docs. Defaults to duration-150.
<code>ease-*</code> Sets <code>animation-timing-function</code>. Uses --tw-ease, see Tailwind CSS docs. Defaults to ease-[ease].
<code>delay-*</code> Sets <code>animation-delay</code>. Possible values: Any <number>, initial, or any other [<value>].
<code>repeat-*</code> Sets <code>animation-iteration-count</code>. Possible values: Any <number>, infinite, initial or any other [<value>].
<code>direction-*</code> Sets <code>animation-direction</code>. Possible values: normal, reverse, alternate, alternate-reverse, initial or any other [<value>].
<code>fill-mode-*</code> Sets <code>animation-fill-mode</code>. Possible values: none, forwards, backwards, both, initial or any other [<value>].
<code>running</code> Sets <code>animation-play-state</code> to running.
<code>paused</code> Sets <code>animation-play-state</code> to paused.
<code>play-state-*</code> Sets <code>animation-play-state</code>. Possible values: initial or any other [<value>].

Transform Classes

Class Description
<code>blur-in-*</code> Applies a blur effect on the element when it enters. Possible values: blur-in, blur-in-<number>, blur-in-(<custom-property>), or blur-in-[<value>].
<code>blur-out-*</code> Applies a blur effect on the element when it exits. Possible values: blur-out, blur-out-<number>, blur-out-(<custom-property>), or blur-out-[<value>].
<code>fade-<io></code> Fades the element in from or out to opacity: 0.
<code>fade-<io>-*</code> Fades the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>].
<code>zoom-<io></code> Zooms the element in from or out to scale3D(0,0,0).
<code>zoom-<io>-*</code> Zooms the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>].
<code>spin-<io></code> Spins the element in from or out to rotate(30deg).
<code>spin-<io>-*</code> Spins the element in from or out to the specified value. Possible values: Any <number> (degrees) or any other [<value>].
<code>slide-<dir></code> Slides the element in from or out to the specified direction (100%).
<code>slide-<dir>-*</code> Slides the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>].

Ready-to-Use Animations

Class Description
<code>accordion-down</code> Accordion down animation. Requires --radix-accordion-content-height or one of the other accordion content height variables to be set to the content's height.
<code>accordion-up</code> Accordion up animation. Requires --radix-accordion-content-height or one of the other accordion content height variables to be set to the content's height.
<code>collapsible-down</code> Collapsible down animation. Requires --radix-collapsible-content-height or one of the other collapsible content height variables to be set to the content's height.
<code>collapsible-up</code> Collapsible up animation. Requires --radix-collapsible-content-height or one of the other collapsible content height variables to be set to the content's height.
<code>caret-blink</code> 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.

Examples

Basic usage:

<div class="animate-in fade-in slide-in-from-top-8 duration-500">
  Fade in from 0% opacity,<br />
  slide from top by 8 spacing units (2rem),<br />
  with a 500ms duration.
</div>

Advanced usage:

<div
  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"
  data-state="show"
>
  <p>
    If the element has the <code>data-state="show"</code> attribute,<br />
    fade in from 0% opacity,<br />
    slide from top by 8 spacing units (2rem),<br />
    with a 500ms duration.
  </p>
  <p>
    If the element has the <code>data-state="hide"</code> attribute,<br />
    fade out to 0% opacity,<br />
    slide to top by 8 spacing units (2rem),<br />
    with a 500ms duration.
  </p>
</div>

Notes on Compatibility

ℹ️ 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.