---
meta:
  title: Transition Tokens
  description: Transition tokens are used to provide consistent transitions throughout your app.
---

# Transition Tokens

Transition tokens are used to provide consistent transitions throughout your app.

| Token                    | Value  | Example                                                                                       |
| ------------------------ | ------ | --------------------------------------------------------------------------------------------- |
| `--sl-transition-x-slow` | 1000ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-slow);"></div> |
| `--sl-transition-slow`   | 500ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-slow);"></div>   |
| `--sl-transition-medium` | 250ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-medium);"></div> |
| `--sl-transition-fast`   | 150ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-fast);"></div>   |
| `--sl-transition-x-fast` | 50ms   | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-fast);"></div> |