---
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                                                                                          |
| --------------------------- | ------ | ------------------------------------------------------------------------------------------------ |
| `--terra-transition-x-slow` | 1000ms | <div class="transition-demo" style="transition-duration: var(--terra-transition-x-slow);"></div> |
| `--terra-transition-slow`   | 500ms  | <div class="transition-demo" style="transition-duration: var(--terra-transition-slow);"></div>   |
| `--terra-transition-medium` | 250ms  | <div class="transition-demo" style="transition-duration: var(--terra-transition-medium);"></div> |
| `--terra-transition-fast`   | 150ms  | <div class="transition-demo" style="transition-duration: var(--terra-transition-fast);"></div>   |
| `--terra-transition-x-fast` | 50ms   | <div class="transition-demo" style="transition-duration: var(--terra-transition-x-fast);"></div> |
