# Animation

`src/css/utilities/animation.css`

Shorthand transition and scroll-driven animation utilities. Prefer these over writing `transition` or `animation` properties inline.

## Transitions

Apply `transition-all` with a fixed duration:

| Class                 | Transition                    |
| --------------------- | ----------------------------- |
| `animation-100--all`  | `transition-all duration-100` |
| `animation-300--all`  | `transition-all duration-300` |
| `animation-500--all`  | `transition-all duration-500` |
| `animation-5000--all` | `transition-all` at 5000ms    |

Apply `transition` (Tailwind default properties) with a fixed duration:

| Class            | Transition                 |
| ---------------- | -------------------------- |
| `animation-100`  | `transition duration-100`  |
| `animation-200`  | `transition duration-200`  |
| `animation-300`  | `transition duration-300`  |
| `animation-500`  | `transition duration-500`  |
| `animation-1000` | `transition duration-1000` |
| `animation-5000` | `transition` at 5000ms     |

## Keyframe animations

| Class                 | Effect                                          |
| --------------------- | ----------------------------------------------- |
| `animate-pause`       | Pauses a running CSS animation                  |
| `animate-xscroll`     | Continuous horizontal scroll (10s linear loop)  |
| `animate-widthexpand` | Width expands 0→100% with fade (500ms infinite) |
| `animate-hop1`        | Vertical hop, stagger offset 0.2s               |
| `animate-hop2`        | Vertical hop, stagger offset 0.4s               |
| `animate-hop3`        | Vertical hop, stagger offset 0.6s               |

## Scroll-driven animations

These use `animation-timeline: view()` and require browser support for `animation-range`. Elements animate as they scroll into and out of the viewport within the 10%–90% range. The `@supports` guard means they silently do nothing in unsupported browsers.

| Class                         | Enter / exit effect                |
| ----------------------------- | ---------------------------------- |
| `scroll-fullblurinout-10-90`  | Fade + blur in and out             |
| `scroll-slideupdown-10-90`    | Slide down from above, exit upward |
| `scroll-slidedownup-10-90`    | Slide up from below, exit downward |
| `scroll-slideleftright-10-90` | Slide in from left, exit left      |
| `scroll-sliderightleft-10-90` | Slide in from right, exit right    |
| `scroll-zoominout-10-90`      | Scale up from 80%, fade in         |