モーション・トランジション
イージング・スプリング・画面遷移。動きの質を決める原則。
動きの質を決める原則を、見比べられる形にしたカテゴリ。イージング4レーンの比較、スプリング物理、距離順のスタガー、FLIP による並び替えとカード→詳細のモーフ、高さ auto の開閉、共有軸トランジション、ページ遷移カーテン、変わった桁だけ回る数字、アイコンの線の変形、スケルトンからのクロスフェード、順出し、スワイプで決めるカード、ホバーインテントがある。原則は一貫性。同じ操作には同じ向き・同じ速さの動きを返すことで、利用者は動きから「何が起きたか」を読めるようになる。個々の演出ではなく、アプリ全体の動きの語彙を決めるときに引く。
使い分けまず easing-compare-lanes で速度曲線を1つ決める。位置が変わるものは flip-reorder-list / layout-morph-expand、画面が進むものは shared-axis-steps、高さが変わるものは expand-collapse-height。読み込みは skeleton-to-content。spring は指で動かす部品にだけ使う。
まず見る3件
- クリック
イージング4レーン比較実例あり
Easing Comparison Lanes
linear / ease-out / ease-in-out / spring 風の4レーンを同時に走らせて、同じ1秒でも「速く入って遅く止まる」動きが自然に見える理由を目で確かめる。
- UI の既定は ease-out（速く入って遅く止まる）。押した瞬間に反応が見え、止まり際が読めるので操作が軽く感じる
- ease-in は出だしが遅く「待たされる」印象になる。消える・退場する要素にだけ使う
- linear は機械的で、止まった瞬間が唐突。回転・進捗バーなど等速が意味を持つものに限る
- JS
- クリック
FLIP で並び替え
FLIP Reorder Animation
「シャッフル」「数値順」で DOM の順序を入れ替えても、各行が元の位置から新しい位置へ滑らかに移動する。First / Last / Invert / Play の4手順を JS で実装。
- FLIP は「先に DOM を変えて最終位置を確定させ、差分だけ transform で巻き戻して再生」する。レイアウトを触るのは1回で済む
- アニメーションは transform と opacity だけに絞る。top/left や height を動かすと毎フレーム再レイアウトが走る
- 移動距離が長い行ほど時間を伸ばさず、同じ 350ms で揃える。速度差が「一斉に入れ替わった」感を作る
- JS
- クリック
共有軸トランジション実例あり
Shared Axis Transition
「次へ」で今の画面が左へ、新しい画面が右から入る。「前へ」なら向きが逆になる。進む・戻るの方向を動きで示すので、どこにいるかを見失わない。
- 出る画面と入る画面は同じ軸で同じ向きに動く。逆向きに動かすと2枚が衝突して見える
- 移動量は 30px 程度で、フェードを併用する。画面幅ぶん動かすと、追いきれず疲れる
- 出る側 90ms で消え、入る側は 210ms で現れる。消えるほうを短くして、新しい画面に時間を使う
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| イージング4レーン比較 Easing Comparison Lanes | クリック | JS | モーション指針をチームで決める場面・イージングの違いを説明する教材・レビュー | default / focus |
| スプリング物理ドラッグ Spring Physics Drag | ドラッグ | JS | ドラッグして離す操作（シート・つまみ）・途中で掴み直される動きに速度を引き継ぐとき | default / active / focus |
| スタガーの波（距離順） Radial Stagger Wave | クリック | JS | 押した位置から反応が広がるグリッド・盤面・操作位置と反応を結びつけたい確認演出 | default / focus |
| FLIP で並び替え FLIP Reorder Animation | クリック | JS | 並び替え・ソートで行の移動先を追わせたい一覧・ランキングの順位変動を見せる画面 | default / focus |
| 高さ auto の開閉アニメ Animate Height Auto (grid-rows) | クリック | JS | FAQ・アコーディオンの高さ auto 開閉・中身の高さが可変で JS で測りたくない場面 | default / focus |
| ページ遷移カーテン Route Transition Curtain | クリック | JS | 世界観を切り替える作品サイトのページ遷移・SPA で内容差し替えの瞬間を隠したいとき | default / focus / active |
| カード→詳細のモーフ FLIP Layout Morph (Card to Detail) | クリック | JS | 一覧のカードをその場で詳細に広げる・モーダルの代わりに「どこから来たか」を保ちたい | default / focus |
| 差分の桁だけ回る数字 Digit Roll Ticker (changed digits only) | クリック | JS | KPI・処理件数などライブ更新される数値・どの桁が変わったかを読ませたい表示 | default / focus |
| アイコンの線が変形 Icon Shape Morph | クリック | JS | メニュー⇄閉じる、再生⇄一時停止のトグル・同じボタンの別状態を連続して伝えたいとき | default / focus / active |
| スケルトン→本文クロスフェード Skeleton Crossfade | クリック | JS | カード・記事の読み込み待ちでレイアウトを揺らさない・本文の行数・画像比率が事前に分かる一覧 | default / focus / disabled / loading |
| 見出し→本文→CTA の順出し Sequential Entrance | クリック | JS | LP のファーストビューで視線を CTA へ導く・見出し→本文→CTA の読む順を強調したい | default / focus |
| スワイプで決めるカード Swipe-to-Decide Gesture Card | ドラッグ | JS | 候補を1件ずつ残す／捨てると判定する画面・短いフリックを意思表示として受けたいとき | default / active / focus / empty |
| ホバーインテント Hover Intent (Safe Triangle) | ホバー | JS | サブメニューへ斜めに移動するメガメニュー・ホバーで中身が切り替わる2段ナビ | default / hover / active / focus |
| 共有軸トランジション Shared Axis Transition | クリック | JS | ウィザード・多段フォームの進む／戻る・オンボーディングの手順切替 | default / focus / disabled / success |
すべての見本（14件）
- クリック
イージング4レーン比較実例あり
Easing Comparison Lanes
linear / ease-out / ease-in-out / spring 風の4レーンを同時に走らせて、同じ1秒でも「速く入って遅く止まる」動きが自然に見える理由を目で確かめる。
- JS
- ドラッグ
スプリング物理ドラッグ実例あり
Spring Physics Drag
つまみをドラッグして離すと減衰振動で中央へ戻る。stiffness（硬さ）と damping（減衰）を変えると、同じ距離でも戻り方がまったく変わる。
- JS
- クリック
スタガーの波（距離順）
Radial Stagger Wave
グリッドのどこかを押すと、押した位置からの距離に比例した遅延で周りのタイルが順に膨らみ、波紋のように広がる。一方向のスタガーとの違いは「起点が操作位置」なこと。
- JS
- クリック
FLIP で並び替え
FLIP Reorder Animation
「シャッフル」「数値順」で DOM の順序を入れ替えても、各行が元の位置から新しい位置へ滑らかに移動する。First / Last / Invert / Play の4手順を JS で実装。
- JS
- クリック
高さ auto の開閉アニメ
Animate Height Auto (grid-rows)
grid-template-rows を 0fr → 1fr にトランジションさせて、中身の高さを測らずに開閉する。JS は aria-expanded を切り替えるだけで、高さの計算をしない。
- JS
- クリック
ページ遷移カーテン
Route Transition Curtain
リンクを押すと幕が下から閉じ、閉じきった瞬間に内容を差し替えて上へ開く。3ページ分の擬似ルーティングで、遷移中の連打も最後の行き先だけを採用する。
- JS
- クリック
カード→詳細のモーフ
FLIP Layout Morph (Card to Detail)
一覧のカードを押すと、その位置と大きさを計測して枠いっぱいの詳細へ拡大する（FLIP）。閉じると同じ経路で元のカードへ戻るので、どこから来たかを見失わない。
- JS
- クリック
差分の桁だけ回る数字
Digit Roll Ticker (changed digits only)
桁ごとに 0〜9 を縦に並べた帯をずらして表示する数字スロット。値を更新すると変わった桁だけが回り、変わらない桁は静止するので、どこが動いたかが一目で分かる。
- JS
- クリック
アイコンの線が変形
Icon Shape Morph
メニュー⇄閉じる、再生⇄一時停止、＋⇄− の3つを、アイコンを差し替えずに線の回転・clip-path の頂点移動で変形させる。同じ図形が姿を変えるので、状態が連続して伝わる。
- JS
- クリック
スケルトン→本文クロスフェード
Skeleton Crossfade
スケルトンと本文を同じグリッドセルに重ねて置き、読み込み完了で不透明度だけを入れ替える。要素の差し替えをしないのでレイアウトシフトが起きない。
- JS
- クリック
見出し→本文→CTA の順出し
Sequential Entrance
ヒーローの要素を、見出し・本文・CTA の順に 80ms ずつ遅らせて fade+rise で出す。読む順番と現れる順番を揃えると、視線が自然に CTA へ着地する。
- JS
- ドラッグ
スワイプで決めるカード
Swipe-to-Decide Gesture Card
カードを左右にドラッグすると傾きながら「残す／捨てる」のラベルが濃くなる。距離か速度がしきい値を超えると飛んでいき、下のカードが繰り上がる。届かなければ弾んで戻る。
- JS
- ホバー
ホバーインテント
Hover Intent (Safe Triangle)
サブメニューへ斜めに移動するとき、素朴な実装は途中の項目に反応して中身が切り替わる。ポインタの移動方向が「サブメニューへ向かう三角形」の中なら切替を遅らせて、ちらつきを防ぐ。
- JS
- クリック
共有軸トランジション実例あり
Shared Axis Transition
「次へ」で今の画面が左へ、新しい画面が右から入る。「前へ」なら向きが逆になる。進む・戻るの方向を動きで示すので、どこにいるかを見失わない。
- JS