--- title: "モーション" description: "スプリングに基づくモーションのトークン、短い状態遷移、そしてモーションの低減に必ず従うという要件。" url: "https://tanrei.chnotchy.com/ja/foundations/motion/" last_updated: 2026-10-23T17:33:05.000Z --- # モーション > スプリングに基づくモーションのトークン、短い状態遷移、そしてモーションの低減に必ず従うという要件。 Tanrei のモーションは、変化を説明したら、すぐに退きます。その大半は、200〜250 ミリ秒かけてフェードインするステートレイヤーです。 ## 2 種類の動き モーションのトークンは、2 つの軸に沿ったスプリングとして整理されています。 - **スペーシャル**のスプリングは、ものを動かしたり、大きさを変えたりします。物体が落ち着くときのように、わずかに行き過ぎることがあります。 - **エフェクト**のスプリングは、色と不透明度を変えます。行き過ぎることはありません。色が弾むと、不具合に見えるからです。 どちらにも **fast**・**default**・**slow** があります。本物のスプリングアニメーションを持つプラットフォームは、剛性と減衰の値を使います。CSS は、あわせて保存されている時間と、cubic-bezier による近似を使います。 スキームは 2 つあります。**standard** が既定で、ほぼ臨界減衰です。**expressive** は追加のレイヤで、弾みを強くしたいプロダクトのためのものです。 ## 時間とイージング スプリングではない遷移のために、固定の時間とイージングカーブを用意しています。 | 変化の種類 | 目安 | | --- | --- | | 状態の変化（ホバー、押下、選択） | 200–250ms | | 要素が現れる | 300–400ms。大きな面ほど長く | | 大きな表示の展開 | 最大 800ms。項目は 100ms ずつずらします | | 何かが消える | 現れたときより速く | | トークン | 値 | カーブ | | --- | --- | --- | | `--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` ## 動かないもの - **フォーカスリングは即座に現れます。** キーボードを使う人は、アニメーションを待たずに、自分がどこにいるかを見られなければなりません。 - **既定ではリップルを描きません。** 押下への応えはステートレイヤーです。リップルはテーマの水準で選ぶオプションで、基本の動作ではありません。 ## モーションの低減 すべての実装は、プラットフォームの動きを減らす設定に従わなければなりません。この設定のもとでは、位置や大きさの動きを取り除くか、短いクロスフェードに置き換え、繰り返し続けるものはなくします。これは各コンポーネントの完了条件の一部であり、追加の改善ではありません。 すべての値は、[モーションのトークンリファレンス](https://tanrei.chnotchy.com/ja/tokens/motion/)に掲載しています。