# tailwind-animations — full agent reference

Package: `tailwind-animations@1.0.2`  
npm: https://www.npmjs.com/package/tailwind-animations  
Repo: https://github.com/midudev/tailwind-animations  
Site: https://tailwind-animations.com  
License: MIT  
Author: Miguel Ángel Durán (@midudev) & community

## What it is

A **CSS-only** Tailwind CSS **v4** plugin. Import it next to Tailwind; no JS plugin API.

```css
@import "tailwindcss";
@import "tailwind-animations";
```

Peer dependency: `"tailwindcss": "4"` (any 4.x).

## Do / Don't

| Do | Don't |
|----|--------|
| Use `animate-{name}` utilities | Expect Tailwind v3 support in latest (use 0.2.0 scoped legacy) |
| Compose with duration/delay/steps | Animate `width`/`height`/`top` for motion |
| Prefer transform + opacity animations | Ship infinite loops without reduced-motion care |
| Use playground for class discovery | Use `^`/`~` when contributing to this repo |

## Install (consumers)

```bash
npm install tailwind-animations
pnpm add tailwind-animations
yarn add tailwind-animations
```

## Utility reference

### Entrance / exit / motion (79 names)

Prefix every name with `animate-`.

- `blink`
- `blurred-fade-in`
- `bounce-fade-in`
- `bouncing`
- `contract-horizontally`
- `contract-vertically`
- `dancing`
- `expand-horizontally`
- `expand-vertically`
- `fade-in`
- `fade-in-down`
- `fade-in-left`
- `fade-in-right`
- `fade-in-up`
- `fade-out`
- `fade-out-down`
- `fade-out-left`
- `fade-out-right`
- `fade-out-up`
- `flash`
- `flip-horizontal`
- `flip-in-x`
- `flip-in-y`
- `flip-out-x`
- `flip-out-y`
- `flip-vertical`
- `flip-x`
- `flip-y`
- `float`
- `hang`
- `heartbeat`
- `horizontal-bounce`
- `horizontal-vibration`
- `impulse-rotation-left`
- `impulse-rotation-right`
- `jelly`
- `jiggle`
- `jump`
- `pop`
- `pulse`
- `pulse-fade-in`
- `pulsing`
- `roll-in`
- `roll-out`
- `rotate-180`
- `rotate-360`
- `rotate-90`
- `rotate-in`
- `rotate-out`
- `rotational-wave`
- `rubber-band`
- `scale`
- `shake`
- `sink`
- `skew`
- `skew-right`
- `slide-in-bottom`
- `slide-in-left`
- `slide-in-right`
- `slide-in-top`
- `slide-out-bottom`
- `slide-out-left`
- `slide-out-right`
- `slide-out-top`
- `slide-rotate-in`
- `slide-rotate-out`
- `slide-up-fade`
- `spin-clockwise`
- `spin-counter-clockwise`
- `squeeze`
- `sway`
- `swing`
- `swing-drop-in`
- `tada`
- `tilt`
- `vertical-bounce`
- `wobble`
- `zoom-in`
- `zoom-out`

### Timing modifiers

```html
<div class="animate-fade-in animate-duration-slow animate-delay-300 animate-iteration-count-twice animate-fill-mode-both">
</div>
```

- **duration:** 0, 100, 150, 200, 250, 300, 400, 500, 700, 800, 900, 1000, none, slower, slow, normal, fast, faster (+ arbitrary `animate-duration-[777ms]`)
- **delay:** 0, 100, 150, 200, 250, 300, 400, 500, 700, 800, 900, 1000, none (+ arbitrary)
- **steps:** none, retro, normal, modern
- **iteration:** none, once, twice, thrice, infinite
- **fill-mode:** none, forwards, backwards, both
- **ease:** `animate-ease`, `animate-ease-in`, `animate-ease-out`, `animate-ease-in-out`, `animate-linear`
- **bezier:** `animate-bezier-sine-in`, `…-quad-out`, `…-back-in-out`, etc.
- **direction:** `animate-direction-normal|reverse|alternate|alternate-reverse`
- **play:** `animate-play-running`, `animate-play-paused`

### Slide distance

```html
<div class="animate-slide-in-left animate-slide-distance-[50%]"></div>
<div class="animate-slide-in-bottom animate-slide-distance-[6rem]"></div>
```

CSS variable: `--tw-anim-slide-distance` (default `20px`).

### Scroll / view timelines

```html
<div class="timeline-scroll animate-rotate-360">…</div>
<div class="animate-zoom-in timeline-view animate-range-entry">…</div>
```

### Dialog (native `<dialog>`)

```html
<dialog class="animate-dialog animate-dialog-from-top animate-dialog-duration-fast" id="d">
  …
</dialog>
```

Related: `animate-dialog-fade`, `animate-dialog-zoom`, `animate-dialog-from-{top,bottom,left,right}`.

## Website map for agents

| Path | Purpose |
|------|---------|
| `/` | Marketing + live demos |
| `/index.md` | **This site's home as Markdown** |
| `/playground/` | Interactive class composer |
| `/playground.md` | Playground as Markdown |
| `/llms.txt` | Short LLM summary |
| `/llms-full.md` | This full reference |
| `/robots.txt` | Crawl rules + sitemap |

## Install this package's agent skill

```bash
npx skills add midudev/tailwind-animations
```

Consumer skill lives at `skills/tailwind-animations/SKILL.md` (mirrored under `.agents/skills/`).

## Contributing to the monorepo (optional)

If you are contributing to the plugin itself (not using it as a dependency), see `AGENTS.md` and `src/index.css` in the GitHub repo. The skills.sh skill is for **consumers**, not monorepo maintainers.

## Performance notes

- Prefer `transform`/`opacity` animations (most of the catalog).
- `blurred-fade-in` uses `filter: blur()` — heavier on mobile.
- Infinite utilities (`pulse`, `horizontal-vibration`, …) keep the compositor busy.
- Dialogs use `will-change` while open — avoid hundreds of simultaneous instances.

---
End of agent reference · tailwind-animations@1.0.2