unocss-tw-animate-css

A collection of UnoCSS utilities for creating beautiful animations tailored for Tailwind CSS. This package includes ready-to-use animations and a set of utilities for creating custom animations.

---

This package serves as an animation preset for UnoCSS, leveraging a CSS-first approach to provide animation capabilities without relying on legacy JavaScript plugins.

Table of Contents

• Getting Started
  • Installation
• Usage
  • Enter/Exit Animations
    • Base Classes
    • Transform Classes
  • Ready-to-Use Animations
• Examples
• Notes on Compatibility

Getting Started

Installation

1. Install the package with pnpm:

   1pnpm install -D unocss-tw-animate-css

2. Add the preset to your UnoCSS configuration file (typically uno.config.ts or similar):

   1import { defineConfig } from 'unocss';
   2import presetTwAnimate from 'unocss-tw-animate-css';
   3
   4export default defineConfig({
   5  presets: [
   6    presetTwAnimate(),
   7    // other presets...
   8  ],
   9  // other configurations...
   10});

3. Start using the animations in your HTML:

   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<!-- And so much more! -->

Usage

Enter/Exit Animations

To define animations, use the following variables:

• <io>: Specify the type of animation. Use in for enter or out for exit animations.
• <dir>: Specify the direction of the slide. Possible values include in-from-top, in-from-bottom, in-from-left, in-from-right, out-to-top, out-to-bottom, etc.
• *: Specify a value to apply.

Base Classes

Class	Description
[animate-<io>]	Base class for enter/exit animations. This needs to be applied for animations to work.

Transform Classes

Class	Description
[fade-<io>]	Fades the element in from or out to opacity: 0.
[zoom-<io>]	Zooms the element in from or out to scale3D(0,0,0).
[slide-<dir>]	Slides the element in from or out to the specified direction.

Ready-to-Use Animations

Class	Description
[accordion-down]	Accordion down animation. Requires content height to be set.
[accordion-up]	Accordion up animation. Requires content height to be set.
[caret-blink]	Blinking animation for caret/cursor.

By the way, if you don't use some of the above animations, they won't be included in the final CSS file due to Tailwind CSS's tree-shaking capabilities.

Examples

Basic usage:

1<div class="animate-in fade-in slide-in-from-top duration-500">
2  Fade in from 0% opacity,<br />
3  slide from top,<br />
4  with a 500ms duration.
5</div>

Advanced usage:

1<div class="data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top duration-500" data-state="show">
2  <p>
3    If the element has the <code>data-state="show"</code> attribute,<br />
4    fade in from 0% opacity,<br />
5    slide from top,<br />
6    with a 500ms duration.
7  </p>
8  <p>
9    If the element has the <code>data-state="hide"</code> attribute,<br />
10    fade out to 0% opacity,<br />
11    slide to top,<br />
12    with a 500ms duration.
13  </p>
14</div>

Notes on Compatibility

NOTE: This package may not be a 100% drop-in replacement for other animation libraries. If you notice any inconsistencies, feel free to contribute to this repository by opening a pull request.