---
url: https://brand.okrado.com/foundations/motion/
title: Motion
description: Durations and easings by token, the exit ratio, and what reduced motion keeps.
kind: reference
owner: Ghassen-Hizem
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
---

# Motion

> Durations and easings by token, the exit ratio, and what reduced motion keeps.

Things move to show a change: a record written, a loop closed, a panel opened. There is no infinite animation on any page.

| Token      | Duration | Used for                        |
| ---------- | -------- | ------------------------------- |
| `micro`    | 120 ms   | hover, press, toggles, tooltips |
| `standard` | 200 ms   | menus, popovers, toasts, tabs   |
| `panel`    | 320 ms   | dialogs, drawers, sheets        |
| `write`    | 500 ms   | a record appears                |
| `loop`     | 1,600 ms | the hero loop draws once        |

Entrances decelerate, exits are 0.8 times as long and accelerate. No bounce.

## Reduced motion

`prefers-reduced-motion: reduce` drops every translate and scale and keeps a short opacity fade, at most 200 ms (exits 160 ms). The tokens below are the normal values; the media query overrides them.

| Token                              | CSS variable                             | Value    |
| ---------------------------------- | ---------------------------------------- | -------- |
| `ui.motion.duration.instant`       | `--okr-ui-motion-duration-instant`       | `0ms`    |
| `ui.motion.duration.micro`         | `--okr-ui-motion-duration-micro`         | `120ms`  |
| `ui.motion.duration.standard`      | `--okr-ui-motion-duration-standard`      | `200ms`  |
| `ui.motion.duration.panel`         | `--okr-ui-motion-duration-panel`         | `320ms`  |
| `ui.motion.duration.write`         | `--okr-ui-motion-duration-write`         | `500ms`  |
| `ui.motion.duration.loop`          | `--okr-ui-motion-duration-loop`          | `1600ms` |
| `ui.motion.duration.fast`          | `--okr-ui-motion-duration-fast`          | `120ms`  |
| `ui.motion.duration.base`          | `--okr-ui-motion-duration-base`          | `200ms`  |
| `ui.motion.duration.slow`          | `--okr-ui-motion-duration-slow`          | `320ms`  |
| `ui.motion.duration.micro-exit`    | `--okr-ui-motion-duration-micro-exit`    | `96ms`   |
| `ui.motion.duration.standard-exit` | `--okr-ui-motion-duration-standard-exit` | `160ms`  |
| `ui.motion.duration.panel-exit`    | `--okr-ui-motion-duration-panel-exit`    | `256ms`  |

| Token                     | CSS variable                    | Value                             |
| ------------------------- | ------------------------------- | --------------------------------- |
| `ui.motion.ease.standard` | `--okr-ui-motion-ease-standard` | `cubic-bezier(0.2, 0, 0, 1)`      |
| `ui.motion.ease.enter`    | `--okr-ui-motion-ease-enter`    | `cubic-bezier(0.16, 1, 0.3, 1)`   |
| `ui.motion.ease.exit`     | `--okr-ui-motion-ease-exit`     | `cubic-bezier(0.3, 0, 0.8, 0.15)` |
| `ui.motion.ease.linear`   | `--okr-ui-motion-ease-linear`   | `cubic-bezier(0, 0, 1, 1)`        |
| `ui.motion.ease.panel`    | `--okr-ui-motion-ease-panel`    | `cubic-bezier(0.32, 0.72, 0, 1)`  |