entrance-animations

入口アニメーション

要素を表示するときは、ディズニーの12の原則を適用します。

原則の適用

スクワッシュ＆ストレッチ：表示時に95%から100%へ拡大します。要素に硬さではなく、弾力を感じさせます。

予備動作：最終位置より少し下、または小さい状態から始めます。スライドアップする前に-10pxずらすと、動きへの期待感が生まれます。

演出：ユーザーの注目方向から登場させます。新しいリスト項目は上から、モーダルは中央から、サイドバーは端から表示します。

ストレート・アヘッドとポーズ・トゥ・ポーズ：ポーズ・トゥ・ポーズを使用します。開始状態（非表示、位置をずらした状態）と終了状態（表示、所定の位置）を明確に定義します。

フォロースルーとオーバーラップ：子要素は少し遅れて表示します。コンテナーが先に表示され、コンテンツは50～100ms後に表示します。

スローイン／スローアウト：登場にはease-outを使用します。速く始まり、ゆるやかに着地します：cubic-bezier(0, 0, 0.2, 1)。

弧を描く動き：Y方向とX方向の動きを組み合わせます。フェードだけにせず、緩やかなカーブを描くようにスライドインさせます。

副次的な動作：フェードと拡大縮小を組み合わせます。不透明度を0→1にしながら、拡大率を0.95→1にすると奥行きが加わります。

タイミング：

• 素早い登場：150～200ms（トースト、ツールチップ）
• 標準的な登場：200～300ms（モーダル、カード）
• 印象的な演出：300～500ms（ヒーローセクション、ページ遷移）

誇張：印象的な効果には拡大率0.8から、さりげない仕上げには0.95から開始します。

立体感のある描画：一貫した3D空間を維持します。「奥から」登場する要素は拡大し、横から登場する要素はスライドさせます。

魅力：登場時には歓迎されていると感じられるようにします。不快な飛び出しを避け、すべての要素に登場の演出を加えます。

タイミングの推奨値

要素の種類	時間	イージング	遅延パターン
トースト／アラート	150ms	ease-out	なし
モーダル	250ms	ease-out	コンテンツを+50ms遅延
カード／項目	200ms	ease-out	なし
リスト項目	200ms	ease-out	50msずつずらす
ページセクション	300ms	ease-out	100msずつずらす
ヒーローコンテンツ	400ms	ease-out	150msずつずらす

実装パターン

.entering {
  animation: entrance 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes entrance {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

ずらし表示の計算式

複数の項目の場合：delay = index * 50ms。シーケンス全体の時間は最大500msにします。

ユーザーが開始した操作を伴わない限り、ずらし表示のシーケンスで5項目を超えないようにしてください。