tailwindcss-animations

# Tailwind CSS Animations & Transitions

## Built-in Animations

### Spin

Continuous rotation for loading indicators:

```html
<svg class="animate-spin h-5 w-5 text-blue-500" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
```

### Ping

Radar-style pulse for notifications:

```html
<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>
```

### Pulse

Subtle fade for skeleton loaders:

```html
<div class="animate-pulse flex space-x-4">
  <div class="rounded-full bg-slate-200 h-10 w-10"></div>
  <div class="flex-1 space-y-2 py-1">
    <div class="h-2 bg-slate-200 rounded"></div>
    <div class="h-2 bg-slate-200 rounded w-5/6"></div>
  </div>
</div>
```

### Bounce

Attention-grabbing vertical bounce:

```html
<svg class="animate-bounce w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
```

## Transitions

### Transition Properties

| Class | CSS Property |
|-------|--------------|
| `transition-none` | None |
| `transition-all` | All properties |
| `transition` | Common properties |
| `transition-colors` | Colors only |
| `transition-opacity` | Opacity only |
| `transition-shadow` | Shadow only |
| `transition-transform` | Transform only |

### Transition Duration

| Class | Duration |
|-------|----------|
| `duration-75` | 75ms |
| `duration-100` | 100ms |
| `duration-150` | 150ms |
| `duration-200` | 200ms |
| `duration-300` | 300ms |
| `duration-500` | 500ms |
| `duration-700` | 700ms |
| `duration-1000` | 1000ms |

### Transition Timing Functions

| Class | Easing |
|-------|--------