continuous-infinite

継続的なアニメーション（無限）

無限アニメーションは、終了状態なしで実行されます。進行中の処理を示したり、周囲の雰囲気を作り出したり、視覚的な関心を持続させたりします。課題は、ユーザーを疲れさせないことです。

継続的な動きにおけるディズニーの原則

持続可能な適用

スクアッシュ＆ストレッチ：控えめでリズミカルにします。注意を引かない、5～10％の揺れに抑えます。跳ねるのではなく、呼吸するような動きです。

予備動作：ループに組み込みます。各サイクルが、目に見える再始動なしに自然に次のサイクルへと流れるようにします。

演出：背景の階層を意識します。継続的な動きが、操作可能な要素の妨げにならないようにします。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：シームレスなループにはポーズ・トゥ・ポーズを使用します。終点は始点と完全に一致させます。

フォロースルー：波の伝播のように、要素を順番に動かして自然な流れを生み出します。

スローイン／スローアウト：滑らかで途切れのない曲線を使用します。注意を引くような急加速は避けます。

アーク：円形や軌道状の経路を使い、自然に原点へ戻るようにします。8の字、楕円、波形などが適しています。

二次動作：周囲の動きを重ねます。異なる速度の複数の要素によって奥行きを生み出します。

タイミング：サイクルの長さに変化をつけます。要素同士を同期させないでください。3秒、5秒、7秒など、互いに素な数の組み合わせを使用します。

誇張：最小限にします。控えめにすることで疲労を防ぎます。ユーザーが動きにほとんど気づかない程度にします。

立体的な描画：シンプルな変形を優先します。複雑なアニメーションはバッテリーと注意力を消耗します。

魅力：落ち着いた動きにし、混乱を招く動きは避けます。継続的な動きは刺激するのではなく、心を落ち着かせるものにします。

ループ時間のガイドライン

• ローディングスピナー：800～1200msのサイクル
• 呼吸／脈動：2000～4000msのサイクル
• アンビエント背景：5000～15000msのサイクル
• 控えめな浮遊：3000～8000msのサイクル

イージングの推奨事項

/* Seamless breathing */
animation-timing-function: ease-in-out;

/* Perpetual smooth motion */
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);

/* Organic, natural feeling */
animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);

最適な使用例

• 読み込み／進捗インジケーター
• アンビエント背景効果
• 音楽ビジュアライザー
• スクリーンセーバー風の表示
• ステータスインジケーター（オンライン状態を示す脈動する点）
• 注意を引く要素（穏やかな通知の脈動）
• 装飾的な動き（浮遊するパーティクル）

実装パターン

/* Seamless spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1000ms linear infinite;
}

/* Breathing pulse */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}
.pulse {
  animation: breathe 3000ms ease-in-out infinite;
}

/* Floating ambient - use multiple with prime-number durations */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(2deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}
.float-a { animation: float 5000ms ease-in-out infinite; }
.float-b { animation: float 7000ms ease-in-out infinite; }
.float-c { animation: float 11000ms ease-in-out infinite; }

アンチパターン

• 複数の継続的なアニメーションを同期させる
• 高頻度の動き（吐き気を引き起こす）
• 周辺視野での大規模な動き
• 主要コンテンツとの競合
• ユーザーの入力中やフォーカス中にも実行する

重要なポイント

継続的なアニメーションは、意図的に存在を感じさせないようにする必要があります。最初の数秒を過ぎてもユーザーが動きを意識するなら、強すぎます。最高の無限アニメーションは、動きとして目に映るのではなく、雰囲気として感じられるものです。