slow-800-1200ms

遅いアニメーション（800-1200ms）

800-1200msでは、アニメーションは映画のような領域に近づきます。これは、重要な瞬間のために意図的に設計された動きです。ユーザーが立ち止まって見入ることを想定しています。

遅い速度でのディズニーの原則

映画的な適用

スクワッシュ＆ストレッチ：顕著で個性豊かな変形です。25-35%の変形で物語を伝えます。オブジェクトに重みと個性を与えます。

予備動作：芝居がかった十分な溜めです。200-300msの準備時間を設けます。観客は何かが起こることを予感します。

演出：シーン構成です。カメラや舞台の視点で考えます。登場順を明確にし、視覚的な階層をはっきりさせます。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：ポーズ・トゥ・ポーズが不可欠です。1秒間の動きに4-6個のキーとなるポーズを使います。

フォロースルー：重なりを長く取ります。各要素が明確に異なるタイミングで落ち着き、200-300msかけて収束します。

スローイン／スローアウト：ドラマチックなカーブです。強いイーズインで重みを生み、強いイーズアウトでインパクトを与えます。

アーク：大きく弧を描きます。動きの軌跡ははっきりと曲がり、目で追えるようにします。

副次動作：複雑なレイヤー構成です。複数の段階の補助的な動きで、主動作を引き立てます。

タイミング：60fpsで48-72フレームです。映画に近い品質のフレーム数です。

誇張：芝居がかった表現です。感情的なインパクトを生むために、比率や動きを強調します。

立体感のある描画：立体的な変形を全面的に活用します。視差、奥行き、3D回転を取り入れます。

魅力：感情的なつながりを生みます。スローモーションによって、インターフェースに親しみが生まれます。

イージングの推奨

/* Dramatic, weighted motion */
transition: all 1000ms cubic-bezier(0.16, 1, 0.3, 1);

/* Graceful entrance */
transition: all 900ms cubic-bezier(0.22, 1, 0.36, 1);

/* Heavy, impactful landing */
transition: transform 1100ms cubic-bezier(0.33, 1, 0.68, 1);

/* Elastic, memorable */
transition: all 1000ms cubic-bezier(0.68, -0.6, 0.32, 1.6);

最適なユースケース

• アプリの起動シーケンス
• 主要機能のお披露目
• ストーリーを伝える場面
• エラーからの回復アニメーション
• 実績の解除
• チュートリアルのシーケンス
• 初回起動時の体験
• プレゼンテーション内のセクション切り替え
• ローディング状態からコンテンツを表示する場面

実装パターン

@keyframes slowReveal {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.slow-reveal {
  animation: slowReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered sequence */
.sequence-item {
  animation: slowReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sequence-item:nth-child(n) {
  animation-delay: calc(var(--index) * 150ms);
}

使用しない場面

• ビュー間の移動（遅すぎます）
• 繰り返し行う操作（ユーザーが待ちきれなくなります）
• 高頻度の操作
• データ量の多いインターフェース
• 生産性向上ツール

重要なポイント

遅いアニメーションは、ユーザーの時間という対価として注意を求めます。その瞬間にユーザーの時間をかける価値がある場合にのみ使用してください。こうしたアニメーションは、単なるフィードバックではなく、記憶に残る体験を生み出します。