state-changes

状態変化のアニメーション

要素が画面から離れずに変化するときは、ディズニーの12の原則を適用します。

原則の適用

スクワッシュ＆ストレッチ：要素は拡大する前に圧縮されます。トグルスイッチはスライドする前に5％つぶれます。

予備動作：変化の前にためを作ります。拡大する前に少し逆方向へ（2～3px）動かします。

演出：ユーザーの注目点を中心に変化させます。状態変化によって操作ポイントから注意をそらさないようにします。

ストレート・アヘッドとポーズ・トゥ・ポーズ：状態を正確に定義します。ボタンには、通常時、ホバー時、アクティブ時、無効時があり、それぞれを厳密にデザインします。

フォロースルーとオーバーラッピング：パーツごとに異なる速度で変化させます。アイコンが回転してからラベルをフェードインさせます。

スローイン／スローアウト：双方向の変化にはイーズイン・イーズアウトを使います：cubic-bezier(0.4, 0, 0.2, 1)。

アーク：回転する要素は自然な弧を描きます。シェブロンは直線的に移動させず、中心点を軸に回転させます。

副次的動作：主な変化に、それを支える動きを組み合わせます。トグルのスライド＋色の変化＋アイコンの切り替え。

タイミング：

• マイクロステート：100-150ms（チェックボックスのチェック、ラジオボタンの塗りつぶし）
• 標準ステート：150-250ms（トグル、アコーディオン）
• 複雑なステート：250-400ms（複数パーツの変化）

誇張：状態変化でわずかに行き過ぎるようにします。トグルは2px行き過ぎてから落ち着きます。

立体感のある描画：変化中も要素の一貫性を保ちます。視覚的な一貫性を損なう変形は避けます。

魅力：状態変化は心地よく感じられるものにします。ユーザーは意図を持ってクリックしています。その意図に応えましょう。

タイミングの推奨値

状態変化	時間	イージング	備考
チェックボックス	150ms	ease-out	チェックを描画する
トグルスイッチ	200ms	ease-in-out	わずかに行き過ぎる
ラジオボタン	150ms	ease-out	中心から拡大する
アコーディオン	250ms	ease-in-out	高さ＋回転
タブ切り替え	200ms	ease-in-out	インジケーターがスライドする
ボタンのアクティブ状態	100ms	ease-out	0.97に縮小する
カードの展開	300ms	ease-in-out	すべてのプロパティを同時に変化させる

実装パターン

.toggle {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-knob {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
}

.toggle.active .toggle-knob {
  transform: translateX(20px);
}

アコーディオンのパターン

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
}

.accordion.open .accordion-content {
  grid-template-rows: 1fr;
}

重要なルール

状態変化は元に戻せるものです。状態Bへのアニメーションは、状態Aへのアニメーションの逆になるようにします。両方向をテストしてください。