transition-sequences

トランジションシーケンスアニメーション

ディズニーの12の原則を、振り付けられた複数ステップのモーションに適用します。

原則の適用

スクワッシュ＆ストレッチ：シーケンス内の各要素は、それぞれ独立して圧縮・伸長し、自然な印象を生み出します。

予備動作：シーケンスは準備段階から始まります。動き出す前に、短く間を置くか、動きをためます。

演出：シーケンスを通じて注意を誘導します。最も重要な要素を最初または最後にアニメーションさせます。

ストレートアヘッドとポーズ・トゥ・ポーズ：各ステップのキーフレームを計画します。実装前にシーケンス全体を組み立てます。

フォロースルーとオーバーラッピング：要素を一斉に動かさず、開始を50〜100msずつずらします。動きが連鎖するようにします。

スローイン／スローアウト：各ステップにイージングを適用します。シーケンス全体にもイージングを適用し、中盤を速く、両端を遅くします。

弧：空間を横切るトランジションは弧を描きます。ページを左にスライドさせる場合は、直線的ではなく、わずかにカーブさせます。

セカンダリーアクション：メインのトランジションに、細部の動きを加えます。ページがスライドする間、内部の要素をフェード／スケールさせます。

タイミング：

• ステップのオーバーラップ：前のステップの時間の30〜50％
• シーケンス全体：UIでは300〜800ms、ドラマチックな演出では最大1500ms
• ステップ間の間隔：0〜100ms（オーバーラップを推奨）

誇張：シーケンス自体が誇張表現です。個々のステップは控えめにします。

立体感のある描画：空間的な一貫性を保ちます。Aが左へ進むなら、Bも左から現れるようにします。

魅力：シーケンスで物語を伝えます。始まり、中盤、終わりを設け、満足感のある結末にします。

タイミングの推奨

シーケンスの種類	全体の時間	ステップ数	ステップのオーバーラップ
タブ変更	300ms	2	50%
ページトランジション	500-600ms	2-3	30%
モーダルを開く	400ms	3	40%
ウィザードのステップ	400ms	2	50%
オンボーディング	800-1200ms	4-6	30%
ドラマチックな登場	1000-1500ms	5-8	40%

実装パターン

/* Staggered sequence */
.sequence-item {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 400ms ease-out forwards;
}

.sequence-item:nth-child(1) { animation-delay: 0ms; }
.sequence-item:nth-child(2) { animation-delay: 80ms; }
.sequence-item:nth-child(3) { animation-delay: 160ms; }
.sequence-item:nth-child(4) { animation-delay: 240ms; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page transition choreography */
.page-exit {
  animation: page-out 250ms ease-in forwards;
}

.page-enter {
  animation: page-in 300ms ease-out 200ms forwards;
}

@keyframes page-out {
  to { opacity: 0; transform: translateX(-30px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

シーケンスのオーケストレーション式

// Calculate stagger delays
const items = document.querySelectorAll('.sequence-item');
const totalDuration = 600; // ms
const overlap = 0.4; // 40% overlap

items.forEach((item, index) => {
  const stepDuration = totalDuration / items.length;
  const delay = index * stepDuration * (1 - overlap);
  item.style.animationDelay = `${delay}ms`;
});

主なルール

1. ステップは30〜50％オーバーラップさせます。間隔を空けず、同時に開始しないようにします。
2. 機能的なUIでは、シーケンス全体を800ms未満にします。
3. 振り付けを確認するため、0.5倍速でテストします。
4. 500msを超えるシーケンスには、スキップする方法を用意します。
5. prefers-reduced-motion：シーケンスを行わず、状態を即座に切り替えます。