---
title: "モーショントークン"
description: "役割ごとの時間、時間のスケール、役割ごとのイージング、面がどこから現れるか、そしてスプリング。"
url: "https://tanrei.chnotchy.com/ja/tokens/motion/"
last_updated: 2026-10-23T17:33:05.000Z
---

# モーショントークン

> 役割ごとの時間、時間のスケール、役割ごとのイージング、面がどこから現れるか、そしてスプリング。

`tanrei.sys.motion` 以下にあるモーションのトークンです。使い方の指針は、[モーション](https://tanrei.chnotchy.com/ja/foundations/motion/)を参照してください。

## 役割ごとの時間

変化にかかる時間は、何が動くかで決まります。状態の変化、選択、大きさが変わる箱、その場で開く内容、そして現れては消える面の種類ごとに役割があります。コンポーネントの時間のトークンは自分の役割の別名なので、レイヤーは 1 行で、同じ役割のコンポーネントすべての時間を変えられます。面は、現れるときより速く消えます。役割の時間はモーションのダイヤルに従います。

| トークン | 値 | プレビュー |
| --- | --- | --- |
| `--tanrei-sys-motion-role-appear-anchored-enter` | 300ms |  |
| `--tanrei-sys-motion-role-appear-anchored-exit` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-enter` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-exit` | 200ms |  |
| `--tanrei-sys-motion-role-appear-modal-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-modal-exit` | 300ms |  |
| `--tanrei-sys-motion-role-appear-sheet-enter` | 400ms |  |
| `--tanrei-sys-motion-role-appear-sheet-exit` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-exit` | 300ms |  |
| `--tanrei-sys-motion-role-disclosure` | 400ms |  |
| `--tanrei-sys-motion-role-feedback` | 450ms |  |
| `--tanrei-sys-motion-role-reduced` | 100ms |  |
| `--tanrei-sys-motion-role-resize-default` | 300ms |  |
| `--tanrei-sys-motion-role-resize-large` | 400ms |  |
| `--tanrei-sys-motion-role-selection-mark` | 250ms |  |
| `--tanrei-sys-motion-role-selection-travel` | 250ms |  |
| `--tanrei-sys-motion-role-show-delay` | 300ms |  |
| `--tanrei-sys-motion-role-state-compact` | 200ms |  |
| `--tanrei-sys-motion-role-state-default` | 250ms |  |
| `--tanrei-sys-motion-role-state-large` | 250ms |  |

生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## 時間

役割の時間のもとになるスケールです。

| トークン | 値 | プレビュー |
| --- | --- | --- |
| `--tanrei-sys-motion-duration-short1` | 50ms |  |
| `--tanrei-sys-motion-duration-press-hold` | 100ms |  |
| `--tanrei-sys-motion-duration-short2` | 100ms |  |
| `--tanrei-sys-motion-duration-stagger` | 100ms |  |
| `--tanrei-sys-motion-duration-short3` | 150ms |  |
| `--tanrei-sys-motion-duration-short4` | 200ms |  |
| `--tanrei-sys-motion-duration-medium1` | 250ms |  |
| `--tanrei-sys-motion-duration-medium2` | 300ms |  |
| `--tanrei-sys-motion-duration-medium3` | 350ms |  |
| `--tanrei-sys-motion-duration-medium4` | 400ms |  |
| `--tanrei-sys-motion-duration-long1` | 450ms |  |
| `--tanrei-sys-motion-duration-long2` | 500ms |  |
| `--tanrei-sys-motion-duration-long3` | 550ms |  |
| `--tanrei-sys-motion-duration-long4` | 600ms |  |
| `--tanrei-sys-motion-duration-extra-long1` | 700ms |  |
| `--tanrei-sys-motion-duration-extra-long2` | 800ms |  |
| `--tanrei-sys-motion-duration-extra-long3` | 900ms |  |
| `--tanrei-sys-motion-duration-extra-long4` | 1000ms |  |

生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## イージング

曲線と、コンポーネントが変化を緩急づける 4 つの役割です。`enter` は現れる面、`exit` は消える面、`state` はその場での状態の変化、`spatial` はその場で動くものや大きさが変わるものに使います。どの役割も、スケールの曲線のどれかを指しています。

| トークン | 値 | カーブ |
| --- | --- | --- |
| `--tanrei-sys-motion-easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) |  |
| `--tanrei-sys-motion-easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) |  |
| `--tanrei-sys-motion-easing-enter` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-exit` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-linear` | cubic-bezier(0, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-spatial` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-state` | cubic-bezier(0.2, 0, 0, 1) |  |

生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## 面がどこから現れるか

現れる面はすべて（メニュー、リスト、ポップオーバー、ツールチップ、ダイアログ、スナックバー）、同じ不透明度、拡大率、距離、ぼかしから始まり、消えるときは同じ道を戻ります。これらは 1 つの「種類の選択」がまとめて決めます。レイヤーは別の選択肢を選ぶことも、値の 1 つを固定することもできます。

`tanrei.sys.behavior.appearance`

How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.\*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice.

fade-scale fade fade-slide blur-slide unfold

fade-scale — 既定値。その選択を描けないプラットフォームのフォールバックでもあります

生成元 `tokens/sys/behavior.tokens.json`

| トークン | 値 |
| --- | --- |
| `--tanrei-sys-motion-appear-blur` | 0px |
| `--tanrei-sys-motion-appear-distance` | 0px |
| `--tanrei-sys-motion-appear-opacity` | 0 |
| `--tanrei-sys-motion-appear-origin` | anchor |
| `--tanrei-sys-motion-appear-scale` | 0.96 |

生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## スプリング

各スプリングには 4 つのサブトークンがあります。`stiffness` と `damping` は、スプリングアニメーションを持つプラットフォームで使います。`duration` と `easing` は、CSS のようにスプリングを使えない場所のための近似です。

| トークン | stiffness | damping | duration | easing | カーブ |
| --- | --- | --- | --- | --- | --- |
| `tanrei.sys.motion.spring.expressive.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.default-spatial` | 380 | 0.8 | 500ms | cubic-bezier(0.38, 1.21, 0.22, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-spatial` | 800 | 0.6 | 350ms | cubic-bezier(0.42, 1.67, 0.21, 0.9) |  |
| `tanrei.sys.motion.spring.expressive.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.slow-spatial` | 200 | 0.8 | 650ms | cubic-bezier(0.39, 1.29, 0.35, 0.98) |  |
| `tanrei.sys.motion.spring.standard.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.default-spatial` | 700 | 0.9 | 500ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-spatial` | 1400 | 0.9 | 350ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-spatial` | 300 | 0.9 | 750ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |

生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`