large-500-800ms

大規模なアニメーション（500-800ms）

500-800msのアニメーションは、イベントになります。ユーザーは立ち止まって見入ります。この長さは、注目に値し、重要性を伝える大切な場面のために取っておきましょう。

大規模なアニメーションにおけるディズニーの原則

すべての原則を存分に活用する

スクワッシュ＆ストレッチ：大胆に変形させます。20-30%のストレッチを見てわかるほどに表現し、個性を持たせます。オブジェクトに弾力と生命感が生まれます。

予備動作：動作の前振りを長めに取ります。150-200msの予備動作で、これから起こるアクションへの期待感が高まります。「何かが起きようとしている」ことを明確に伝えます。

ステージング：洗練された振り付けを用います。複数の要素に明確な優先順位を付け、タイミングにずれを設けます。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：必ずポーズ・トゥ・ポーズにします。複雑な動きにはキーフレームによる制御が必要です。

フォロースルー：落ち着くまでの時間を長めに取ります。メインの動作が完了した後も、要素が100-200ms動き続けます。

スローイン／スローアウト：ドラマチックなイージングを使います。強い減速によって、動作の終点にインパクトが生まれます。

弧を描く動き：欠かせない要素です。すべての動きに自然な曲線を使います。

二次動作：豊かなレイヤーを加えます。メイン、セカンダリー、ターシャリーの動作を組み合わせられます。

タイミング：60fpsで30-48フレームです。シネマティックな表現を存分に活用できます。

誇張：大胆に表現しましょう。この長さなら、演劇的な表現が可能です。

立体感のある描画：3Dトランスフォームを存分に使います。奥行き、遠近感、複雑な回転を取り入れます。

魅力：記憶に残る場面を作ります。ユーザーはこうしたアニメーションを覚えているでしょう。

イージングの推奨事項

/* Dramatic entrance */
transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);

/* Powerful deceleration */
transition: all 700ms cubic-bezier(0, 0.55, 0.45, 1);

/* Elastic landing */
transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Smooth, cinematic */
transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);

最適な使用例

• ヒーロー画像やセクションの表示
• 主要機能の紹介
• 成功や完了を祝う演出
• オンボーディングのシーケンス
• ダッシュボードのデータ読み込み
• ポートフォリオ作品の表示
• 初回利用時の体験
• 重要な状態の変化

実装パターン

.hero-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: opacity 500ms ease-out,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered reveal with follow-through */
.hero-title { transition-delay: 0ms; }
.hero-subtitle { transition-delay: 100ms; }
.hero-cta { transition-delay: 200ms; }

注意すべき兆候

• ユーザーが待ちきれない様子なら、時間が長すぎます
• 一般的な操作に使うと、操作の流れが損なわれます
• 複数の大規模なアニメーションが競い合うと、ステージングがうまくいきません

重要なポイント

大規模なアニメーションは、演劇のひと幕です。体験にメリハリを付け、記憶に残るものを作ります。使いすぎないようにしましょう。大規模なアニメーションはどれも、その長さに見合う価値が必要です。