---
title: "Motion"
description: "Easing curves, durations and transition tokens with their CSS variables."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/reference/tokens/motion
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

## Easing curves

Curves from the `easings` token collection. Each is a `--ease-*` variable on `:root` and an `ease-*` utility for `transition-timing-function`; `animate-ease-*` sets `animation-timing-function` with the same names.

| Token            | CSS variable          | Class               | Value                                 |
| ---------------- | --------------------- | ------------------- | ------------------------------------- |
| `easeInSine`     | `--ease-in-sine`      | `ease-in-sine`      | `cubic-bezier(0.12, 0, 0.39, 0)`      |
| `easeOutSine`    | `--ease-out-sine`     | `ease-out-sine`     | `cubic-bezier(0.61, 1, 0.88, 1)`      |
| `easeInOutSine`  | `--ease-in-out-sine`  | `ease-in-out-sine`  | `cubic-bezier(0.37, 0, 0.63, 1)`      |
| `easeInQuad`     | `--ease-in-quad`      | `ease-in-quad`      | `cubic-bezier(0.11, 0, 0.5, 0)`       |
| `easeOutQuad`    | `--ease-out-quad`     | `ease-out-quad`     | `cubic-bezier(0.5, 1, 0.89, 1)`       |
| `easeInCubic`    | `--ease-in-cubic`     | `ease-in-cubic`     | `cubic-bezier(0.32, 0, 0.67, 0)`      |
| `easeOutCubic`   | `--ease-out-cubic`    | `ease-out-cubic`    | `cubic-bezier(0.33, 1, 0.68, 1)`      |
| `easeInOutCubic` | `--ease-in-out-cubic` | `ease-in-out-cubic` | `cubic-bezier(0.65, 0, 0.35, 1)`      |
| `easeInQuart`    | `--ease-in-quart`     | `ease-in-quart`     | `cubic-bezier(0.5, 0, 0.75, 0)`       |
| `easeOutQuart`   | `--ease-out-quart`    | `ease-out-quart`    | `cubic-bezier(0.25, 1, 0.5, 1)`       |
| `easeInOutQuart` | `--ease-in-out-quart` | `ease-in-out-quart` | `cubic-bezier(0.76, 0, 0.24, 1)`      |
| `easeInQuint`    | `--ease-in-quint`     | `ease-in-quint`     | `cubic-bezier(0.64, 0, 0.78, 0)`      |
| `easeOutQuint`   | `--ease-out-quint`    | `ease-out-quint`    | `cubic-bezier(0.22, 1, 0.36, 1)`      |
| `easeInOutQuint` | `--ease-in-out-quint` | `ease-in-out-quint` | `cubic-bezier(0.83, 0, 0.17, 1)`      |
| `easeInExpo`     | `--ease-in-expo`      | `ease-in-expo`      | `cubic-bezier(0.7, 0, 0.84, 0)`       |
| `easeOutExpo`    | `--ease-out-expo`     | `ease-out-expo`     | `cubic-bezier(0.16, 1, 0.3, 1)`       |
| `easeInOutExpo`  | `--ease-in-out-expo`  | `ease-in-out-expo`  | `cubic-bezier(0.87, 0, 0.13, 1)`      |
| `easeInCirc`     | `--ease-in-circ`      | `ease-in-circ`      | `cubic-bezier(0.55, 0, 1, 0.45)`      |
| `easeOutCirc`    | `--ease-out-circ`     | `ease-out-circ`     | `cubic-bezier(0, 0.55, 0.45, 1)`      |
| `easeInOutCirc`  | `--ease-in-out-circ`  | `ease-in-out-circ`  | `cubic-bezier(0.85, 0, 0.15, 1)`      |
| `easeInBack`     | `--ease-in-back`      | `ease-in-back`      | `cubic-bezier(0.36, 0, 0.66, -0.56)`  |
| `easeOutBack`    | `--ease-out-back`     | `ease-out-back`     | `cubic-bezier(0.34, 1.56, 0.64, 1)`   |
| `easeInOutBack`  | `--ease-in-out-back`  | `ease-in-out-back`  | `cubic-bezier(0.68, -0.6, 0.32, 1.6)` |

## Built-in curves

Curves Systhema adds from easings.net when the token collection does not declare them.

| CSS variable         | Class              | Value                            |
| -------------------- | ------------------ | -------------------------------- |
| `--ease-in-out-quad` | `ease-in-out-quad` | `cubic-bezier(0.45, 0, 0.55, 1)` |