css-animation-patterns

CSS アニメーションのパターン

概要

CSS アニメーションとトランジションを使用すると、キーフレーム、トランジション、変形に加え、最新のスクロール駆動型 API やビュー遷移 API によって、Web インターフェースでハードウェアアクセラレーション対応の動きを実現できます。滑らかな 60fps のパフォーマンスを保つため、アニメーションには合成プロパティ（transform、opacity、filter）のみを使用し、常に prefers-reduced-motion を尊重してください。

ブラウザーのレンダリングパイプラインは、Style、Layout、Paint、Composite の 4 つの段階で構成されます。合成のみのプロパティをアニメーションさせると、Layout と Paint が完全にスキップされ、GPU のコンポジタースレッド上で実行されます。これは CSS アニメーションにおいて、最も重要なパフォーマンス原則です。

最新の CSS には、強力な API が 2 つ追加されています。スクロール駆動型アニメーションは、キーフレームの進行を時間ではなくスクロール位置や要素の表示状態に連動させます。また、View Transitions APIは、SPA と MPA の両方で、DOM の状態間にスナップショットを使用したアニメーション付き遷移を作成します。

使用する場面： 要素の状態変化、ページ遷移、スクロール連動エフェクト、ローディングインジケーター、マイクロインタラクション、ルート変更アニメーション、スクロールに応じた表示パターン、パララックスエフェクト、スクロールに連動する進行状況インジケーター。

使用しない場面： 複雑な物理シミュレーション（JS アニメーションライブラリを使用）、Canvas/WebGL のレンダリング、フレーム単位でスクリプト制御する必要があるアニメーション（Web Animations API を直接使用）、高度なドラッグ＆ドロップ操作（JS でポインターイベントを使用）。

ブラウザーサポートの概要

機能	Chrome	Firefox	Safari
トランジション、キーフレーム、変形	完全対応	完全対応	完全対応
個別の変形プロパティ	104+	72+	14.1+
@starting-style	117+	129+	17.5+
transition-behavior: allow-discrete	117+	129+	17.4+
スクロール駆動型アニメーション	115+	未対応	26+
同一ドキュメント内のビュー遷移	111+	144+	18+
ドキュメント間のビュー遷移	126+	未対応	18+
view-transition-class	125+	144+	18+

新しい機能を段階的に利用するには、@supports を使用してください。アニメーションなしでも機能するフォールバックを必ず用意してください。

クイックリファレンス

パターン	API	主なポイント
状態遷移	transition: property duration easing	プロパティの変更時に実行されます。パフォーマンスのため、合成処理のみで動作します
離散的な遷移	transition-behavior: allow-discrete	display、visibility の遷移を有効にします
登場アニメーション	@starting-style { ... }	DOM に追加された要素の初期状態を指定します
キーフレームアニメーション	@keyframes name + animation shorthand	複数ステップのシーケンスに対応し、forwards の塗りつぶしモードをサポートします
変形	transform: translate() scale() rotate()	GPU 合成され、レイアウトの再計算が発生しません
個別の変形	translate、rotate、scale	異なるタイミングで個別にアニメーションできます
スクロール進行度	animation-timeline: scroll()	アニメーションをコンテナーのスクロール位置に連動させます
ビュー進行度	animation-timeline: view()	アニメーションをスクロールポート内の要素の表示状態に連動させます
アニメーション範囲	animation-range: entry 0% entry 100%	アニメーションを駆動するタイムラインの区間を制御します
名前付きスクロールタイムライン	scroll-timeline-name + scroll-timeline-axis	要素間で再利用できるスクロールタイムライン
名前付きビュータイムライン	view-timeline-name + view-timeline-axis	表示状態の追跡に使える、再利用可能なビュータイムライン
ビュー遷移（SPA）	document.startViewTransition(callback)	スナップショットベースで DOM の更新をアニメーション化します
ビュー遷移（MPA）	@view-transition { navigation: auto }	ドキュメント間の遷移に対応します。同一オリジンに限ります
遷移名	view-transition-name: hero	要素を識別し、独立した遷移グループに分けます
遷移クラス	view-transition-class: card	名前付き要素をグループ化し、共通の遷移スタイルを適用します
遷移タイプ	startViewTransition({ types: [...] })	ナビゲーションの方向に応じた条件付きスタイルを指定します
GPU ヒント	will-change: transform	要素をコンポジターレイヤーに昇格します。使用は控えめにしてください
モーション設定	@media (prefers-reduced-motion: reduce)	アクセシビリティのため、アニメーションを無効化または簡略化します
カスタムイージング	cubic-bezier() or linear()	タイミング曲線を細かく調整できます。複数点のイージングには linear() を使います
ステップイージング	steps(n, jump-term)	フレーム単位の離散的なアニメーションです
アニメーション合成	animation-composition: accumulate	同じプロパティに対する複数のアニメーションの合成方法を制御します
段階的な遅延	animation-delay: calc(var(--i) * 60ms)	CSS カスタムプロパティを使って要素ごとに遅延を設定します
レンダリングの封じ込め	contain: layout style	レンダリング範囲を分離し、アニメーションのパフォーマンスを向上させます
コンテンツの可視性	content-visibility: auto	画面外のコンテンツのレンダリングをスキップします

よくある間違い

間違い	正しいパターン
width、height、top、leftをアニメーションさせる	レイアウトに影響しないアニメーションにはtransform: translate()とscale()を使います
すべての要素にwill-changeを追加する	頻繁にアニメーションする要素にのみ適用し、アニメーション後に削除します
prefers-reduced-motionへの対応がない	モーションを@media (prefers-reduced-motion: no-preference)で囲みます
あらゆる場所でtranslateZ(0)のハックを使う	代わりにwill-changeを使い、必要な場合にのみ適用します
animationのショートハンドより前にanimation-timelineを宣言する	animationの後にanimation-timelineを宣言します（ショートハンドによってautoにリセットされます）
スクロール駆動アニメーションにanimation-durationを設定する	再生時間はスクロールによって制御されます。autoを使うか省略し、Firefoxとの互換性のために1msを設定します
view-transition-nameは一意である必要があることを忘れる	対象となる各要素には、ページスナップショットごとに異なる名前が必要です
スクロール駆動アニメーションのフォールバックを用意しない	プログレッシブエンハンスメントには@supports (animation-timeline: scroll())を使います
GPU合成を期待してbackground-colorをアニメーションさせる	安定してGPU合成されるのはtransform、opacity、filterのみです
transition: allを使う	予期しないトランジションやパフォーマンス低下を避けるため、プロパティを正確に指定します
JavaScriptアニメーションでDOMの読み取りと書き込みを交互に行う	まず読み取りをまとめてから書き込むか、requestAnimationFrameを使います
ReactのビュートランジションでflushSyncを使わない	Reactは更新をまとめるため、コールバック内でnavigate()をflushSyncで囲みます
機能チェックなしでstartViewTransitionを呼び出す	必ずif (!document.startViewTransition)でフォールバックを用意します

委任

• アニメーションの実装：Exploreエージェントを使って、参考ファイル内のパターンを見つけます
• パフォーマンス監査：Taskエージェントを使って、コンポーネント全体のアニメーションパフォーマンスをレビューします
• アクセシビリティレビュー：Taskエージェントを使って、prefers-reduced-motionへの対応状況を確認します
• コードレビュー：アニメーション関連のPRレビューをcode-reviewerエージェントに委任します

ux-designerスキルが利用可能な場合は、ビジュアルモーションデザインに関する判断を委任します。 それ以外の場合は、次を推奨します：npx skills add oakoss/agent-skills --skill ux-designer

参考資料

• トランジション、キーフレーム、アニメーションプロパティ
• トランスフォームとパフォーマンスの最適化
• スクロール駆動アニメーション
• ビュートランジションAPI