continuous-loops

連続ループアニメーション

Disneyの12の原則を、止まることのないアニメーションに適用します。

原則の適用

スクワッシュ＆ストレッチ：控えめなスケールの振動（0.98-1.02）で、有機的な呼吸感を生み出します。硬直した機械的なループは避けてください。

予備動作：ループのサイクルに予備動作を組み込みます。反転する前に、極点で短く一時停止します。

演出：ループは主役になるのではなく、要素を引き立てるものにします。背景要素の振幅は控えめに保ってください。

ストレートアヘッドとポーズ・トゥ・ポーズ：シームレスにループするキーフレームポーズを設計します。終了フレームから開始フレームへ自然につながる必要があります。

フォロースルーとオーバーラッピング：複数の要素からなるループでは、それぞれの要素の位相をずらします。3つのドットは120°の位相差で脈動させます。

スローイン／スローアウト：滑らかな振動にはイーズイン・イーズアウトを使います。リニアな動きは機械的に見えます。

弧：円運動は正確な弧を描きます。スピナーは回転し、振り子は揺れ、軌道運動は円を描きます。

二次動作：主となる回転に、二次的な揺れを加えます。スピナーを回転させながら、わずかに弾ませます。

タイミング：

• 高速ループ：500-800ms（スピナー、緊急度の高いインジケーター）
• 中速ループ：1000-2000ms（脈動、呼吸）
• 低速ループ：2000-4000ms（環境要素、背景）

誇張：ループでは最小限にします。繰り返し自体が、すでに注意を引くからです。

立体感のある描画：ループはシームレスでなければなりません。終了点と開始点の間に少しでも飛びがあると、錯覚が崩れます。

魅力：ループは心地よく没入できるものにし、煩わしいものにしないでください。30秒間見ても、心地よさが続きますか？

タイミングの推奨事項

ループの種類	継続時間	イージング	反復回数
スピナー	600-800ms	linear（回転）	無限
脈動	1500-2000ms	ease-in-out	無限
スケルトンのシマー	1500ms	ease-in-out	無限
タイピングドット	1400ms	ease-in-out	無限
呼吸	3000-4000ms	ease-in-out	無限
浮遊	3000-5000ms	ease-in-out	無限

実装パターン

/* Smooth spinner */
.spinner {
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Organic pulse */
.pulse {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* Staggered dots */
.dot {
  animation: bounce 1400ms ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 160ms; }
.dot:nth-child(3) { animation-delay: 320ms; }

パフォーマンスのルール

1. transform と opacity のみを使用し、レイアウトプロパティは使わないでください
2. 1秒を超えるループには will-change: transform を追加してください
3. Intersection Observerを使って、画面外のループを一時停止してください
4. prefers-reduced-motion を尊重し、ループを減らすか停止してください

シームレスなループの公式

呼吸や脈動では、キーフレームの 0%, 100% を同一にする必要があります。単純な往復効果には、alternate 方向を使います。