# Tailwind Animations

> CSS animation utilities for **Tailwind CSS v4**. Package `tailwind-animations@1.0.2`. MIT licensed by midudev & community.

This document is the **agent-readable** version of the homepage.
Human UI: https://tailwind-animations.com/ · Markdown: https://tailwind-animations.com/index.md · Full catalog: https://tailwind-animations.com/llms-full.md

## Quick links

| Resource | URL |
|----------|-----|
| Website | https://tailwind-animations.com/ |
| Playground | https://tailwind-animations.com/playground/ |
| Playground (markdown) | https://tailwind-animations.com/playground.md |
| npm | https://www.npmjs.com/package/tailwind-animations |
| GitHub | https://github.com/midudev/tailwind-animations |
| llms.txt | https://tailwind-animations.com/llms.txt |
| Full agent doc | https://tailwind-animations.com/llms-full.md |

## Install

```bash
npm install tailwind-animations
# or: pnpm add tailwind-animations
```

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

**Requirements:** Tailwind CSS **v4** (peer: `"tailwindcss": "4"` → any 4.x).

**Tailwind v3:** use legacy `@midudev/tailwind-animations@0.2.0` (deprecated).

## Usage

```html
<div class="animate-fade-in">Hello</div>

<div class="animate-slide-in-bottom animate-delay-300 animate-duration-slow">
  Delayed slide from bottom
</div>

<div class="animate-slide-in-left animate-slide-distance-[6rem]">
  Custom slide distance
</div>
```

## Site sections (HTML)

- `#animation-collection` — gallery of all utilities (hover preview, click copy)
- `#option-inputs` — duration / delay / steps / play-all controls
- `#slide-distance` — slide distance demos (if present)
- `#scroll-animations` — scroll-driven motion
- `#scroll-view-timelines` — view/scroll timelines
- `#dialog-effects` — native `<dialog>` entry/exit (`animate-dialog`)
- `#faq` — FAQ
- Playground CTA → `https://tailwind-animations.com/playground/`

## Animation catalog (79)

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

## Modifiers

### Duration (`animate-duration-*`)
`0`, `100`, `150`, `200`, `250`, `300`, `400`, `500`, `700`, `800`, `900`, `1000`, `none`, `slower`, `slow`, `normal`, `fast`, `faster`

### Delay (`animate-delay-*`)
`0`, `100`, `150`, `200`, `250`, `300`, `400`, `500`, `700`, `800`, `900`, `1000`, `none`

### Steps (`animate-steps-*`)
`none`, `retro`, `normal`, `modern`

### Iteration (`animate-iteration-count-*`)
`none`, `once`, `twice`, `thrice`, `infinite`

### Fill mode (`animate-fill-mode-*`)
`none`, `forwards`, `backwards`, `both`

### Other
- Timing: `animate-ease`, `animate-ease-in`, `animate-ease-out`, `animate-ease-in-out`, `animate-linear`, `animate-bezier-*`
- Direction: `animate-direction-normal|reverse|alternate|alternate-reverse`
- Play state: `animate-play-running`, `animate-play-paused`
- Slide distance: `animate-slide-distance-[…]` (length or %)
- Timeline: `timeline-scroll`, `timeline-view`, `animate-range-*`
- Dialog: `animate-dialog`, `animate-dialog-from-*`, `animate-dialog-fade|zoom`, `animate-dialog-duration-*`

## Playground URL state

`https://tailwind-animations.com/playground/?a=fade-in&d=1000&delay=0&s=none&i=once&f=both&p=box`

| Param | Meaning |
|-------|---------|
| `a` | animation name (without `animate-` prefix) |
| `d` | duration key |
| `delay` | delay key |
| `s` | steps key |
| `i` | iteration key |
| `f` | fill mode |
| `p` | preset: `box` \| `button` \| `card` \| `text` |

## For AI agents

- Prefer markdown endpoints (`/index.md`, `/playground.md`, `/llms-full.md`) over scraping HTML.
- Source of truth for CSS: `https://github.com/midudev/tailwind-animations/blob/main/src/index.css`
- Consumer agent skill (skills.sh): `npx skills add midudev/tailwind-animations`
- Skill files: `skills/tailwind-animations/SKILL.md`
- Supply-chain rules for contributors: `AGENTS.md` (exact dep pins, no `^`/`~`, keep lockfile)

---
Generated from `tailwind-animations@1.0.2` · https://tailwind-animations.com