# Animation and presence

> Spring transitions, entry and exit styles, keys, and Presence.

Animation in Masque is declarative. Rather than writing keyframes, you say which properties spring toward their new value when it changes.

## Transitions

```masque
Flex {
  key: "save-button",
  initial: { opacity: 0, transform: { translate_y: -12 } },
  exit:    { opacity: 0, transform: { translate_y:  -8 } },
  style: {
    padding: 12,
    background_color: { r: 60, g: 90, b: 120, a: 255 },
    transition: {
      opacity: "spring",
      transform: "spring",
      background_color: { stiffness: 200, damping: 28 },
    },
  },
  hover_style: {
    background_color: { r: 90, g: 120, b: 150, a: 255 },
  },
  children: [ Text { text: "Save" } ],
}
```

- **`transition`** lists the properties that spring. `"spring"` uses the defaults, or tune each property with stiffness and damping.
- **`initial`** is the style a widget is born at. It springs from there to `style`.
- **`exit`** is the style it animates toward when it leaves the tree. It stays as a ghost until its springs settle.
- **`key`** is the widget's stable identity. Exit animations need it, so reconciliation can tell removal from reordering.

Animatable properties include colours, borders, corner radius, padding, margin, gap, text size, opacity and transform.

## Presence

Wrap a swap point, such as a page transition, in `Presence`:

```masque
Presence {
  key: current_page,
  mode: "wait",
  children: [ render_page(current_page) ],
}
```

When `key` changes, the old content exits. In the default `"pop"` mode, the new content enters at the same time, under the outgoing ghosts. In `"wait"` mode, it waits until the exit has finished.