CSS アニメーションガイド：トランジション、キーフレームとパフォーマンス

CSS アニメーションのために界面注入生命，提供する视觉フィードバック、引导用户注意する力かつ创造させる人難忘の体验。做て良のアニメーション感觉当然直观；做て差のアニメーションできるをもたらす卡顿、分散用户注意する力，甚至引发身体不适。このガイドではたからトランジションとキーフレームのベース知识まで高级パフォーマンス最適化とアクセシビリティ性のすべての内容，させるあなた掌握作成するストリーム畅、あり目的かつ包容のアニメーションの知识。

CSS トランジションとアニメーション

CSS 提供するた两種類作成する动效の異なる机制：トランジションとアニメーション。理解する何时使用毎種類机制は有効入行 CSS アニメーション工作のベース。

CSS トランジション

トランジションのために CSS 属性两个ステートの間の变化追加するアニメーション。あなた定義するする必要があるアニメーションの属性、アニメーション継続的に時間とイージング曲线，ブラウザ自动処理する起始值と終了する值の間の補間。トランジション由ステート变化トリガーする，如ホバーする、フォーカスする、类追加するまたは JavaScript 属性より改。

.button {
  background: #3b82f6;
  transform: scale(1);
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

トランジション非常に適合する簡単の两态アニメーション。それ们必要とする最も少のコード，易于理解する，かつでブラウザ中信頼できる実行する。制限するはそれ们だけで两个值の間做アニメーション——あなたできない定義する中间步骤。

CSS アニメーション（キーフレーム）

アニメーション使用 @keyframes 规すなわち定義する任意数量步骤のスタイル变化序列。とトランジション異なる，アニメーションできる状態に依存しない变化実行する、なし限循环、反へ播放と一時停止する。それ们させるあなた精密に制御するアニメーションの毎一帧。

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

.pulse-element {
  animation: pulse 2s ease-in-out infinite;
}

どちらを使用すべきか

キーフレーム構文詳細分析

@keyframes 规すなわちは CSS アニメーションの核心。十分に理解する其構文できる释放多步アニメーション序列のすべて力量。

パーセントベースのキーフレーム

キーフレーム使用から 0% まで 100% の百分比值定義する，表示アニメーション時間线上の入度。あなたできるに基づいて必要とする定義する任意数量のキーフレーム，ブラウザでそれ们の間入行補間：

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}

多个キーフレームできるを通じて逗号分隔百分比值来共享同一つのスタイル块，如上面例中の 0%, 100%。これに対して戻る起始ステートのアニメーションとてもあり用。

アニメーションのショートハンドプロパティ

animation 简写属性する八个子属性组コンポジット一つの声明。顺序のために：name、duration、timing-function、delay、iteration-count、direction、fill-mode と play-state。

.element {
  animation: slideIn 0.5s ease-out 0.2s 1 forwards running;
}

/* Equivalent longhand */
.element {
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

アニメーションのフィルモード

animation-fill-mode 属性制御するアニメーション実行する前後適用するどのスタイル。これは最も常られる误解のアニメーション属性の一つ：

• none（默认）：アニメーション終了する时元素戻るまでアニメーション前のスタイル。
• forwards：アニメーション終了する後元素予約最後に一帧のスタイル。に対してエントランスアニメーション中希望する元素停留で最も终位置の情况非常に重要です。
• backwards：でアニメーションレイテンシ期间（アニメーション開始する前），元素適用する第一帧のスタイル。
• both：組み合わせる forwards と backwards 行のために。元素でレイテンシ期间表示する第一帧，完了する後予約最後に一帧。

イージング関数

イージング関数（もと呼ばれる定时函数）定義するアニメーションの加速する曲线。それ们決定するアニメーションは缓遅開始するそれから加速する、高速開始するそれから减速，それとも従うより複雑のパターン。正しくのイージング関数させるアニメーション感觉当然；間違いのイージング関数させるアニメーション感觉机械または突兀。

ビルトインイージング関数

• linear：全体のアニメーションたことがある程中速度恒定。まれに看起来当然，なぜなら现实世界中の物体できない匀速运动。に適用される机械または旋转アニメーション。
• ease（默认）：開始する缓遅，中间加速する，结尾减速。に適用される大多数の UI トランジションの良良通用イージング。
• ease-in：開始する缓遅それから加速する。创造「积蓄动量」の感觉。に適用される元素离開屏幕または下落。
• ease-out：開始する高速それから减速。创造「すぐに位」の感觉。UI 元素入入屏幕时最も常用のイージング。
• ease-in-out：遅速開始すると終了する，中间より速。類似して于 ease しかし加速すると减速より明らかに。に適用されるより大、より戏剧性のトランジション。

3次ベジェ曲線

cubic-bezier() 函数させるあなたを通じて精密に制御する定義するカスタマイズするイージング曲线。それ受け取る四个参数表示3次ベジェ曲線の制御する点：cubic-bezier(x1, y1, x2, y2)。x 值表示時間（0 まで 1），y 值表示入度（できる超出 0-1 実装するたことがある冲效果）。

.element {
  /* Smooth deceleration - great for entrances */
  transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1.0);

  /* Smooth acceleration - great for exits */
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);

  /* Material Design standard easing */
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

ステップ関数

steps() 函数作成する离散の逐帧アニメーション，そして非平滑補間。これに対して精灵图アニメーションまたは作成する「打字」效果とてもあり用：

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.typing-effect {
  animation: typing 3s steps(40, end);
  overflow: hidden;
  white-space: nowrap;
}

パフォーマンス最適化

ストリーム畅のアニメーション必要とする达まで毎秒 60 帧 (fps)，これは以下を意味します毎帧必須で 16.67 ミリ秒内完了する。未できる満たす此预算できるをもたらす可见の卡顿——画面抖动、丢帧と用户体验下降。理解するブラウザレンダリングパイプラインは编写高パフォーマンスアニメーションの閉键。

レンダリングパイプライン

時に CSS 属性变化时，ブラウザ最も多を経て三个阶段来更新する表示する：

1. スタイル：確認するどの CSS 规すなわち適用する于どの元素。
2. レイアウト：計算する各元素の大小と位置。由 width、height、margin、padding、top、left、font-size と其彼いくつ何属性の变化トリガーする。
3. ペイント：のために各元素填充ピクセル。由 color、background、box-shadow、border-radius と其彼视觉属性の变化トリガーする。
4. コンポジット：按正しく顺序コンポジット已ペイントの层。だけがこれ一步で GPU 上実行する。由 transform と opacity の变化トリガーする。

だけトリガーするコンポジット步骤のアニメーションのパフォーマンス最良，なぜならそれ们完全スキップするたレイアウトとペイント。これすぐにはなぜ transform と opacity は高パフォーマンス CSS アニメーションの黄色金標準。

コンポジター専用プロパティ

使用 will-change

will-change 属性告诉ブラウザどの属性预期できる变化，許可するそれを通じてする元素向上させるまで自己のコンポジター层来提前最適化する。しかし，それすべき谨慎使用：

/* Apply will-change just before the animation */
.element:hover {
  will-change: transform;
}

/* Remove it after the animation completes */
.element {
  transition: transform 0.3s ease;
}

will-change の常见間違いを含むする其適用する于あまりにも多元素（各コンポジター层消耗 GPU メモリ）と永久予約それ（浪费资源）。良の做法はでアニメーション開始する前を通じて JavaScript 追加する will-change，でアニメーション終了する後削除するそれ。

使用 Transform の代わりに代レイアウト属性

最も効果的のパフォーマンス最適化は用 transform の代わりに代レイアウトをトリガーの属性：

• 使用 transform: translateX(100px) の代わりに代 left: 100px
• 使用 transform: translateY(50px) の代わりに代 top: 50px
• 使用 transform: scale(1.5) の代わりに代 width: 150%; height: 150%
• 使用 transform: rotate(45deg) の代わりに代を通じてレイアウト旋转

常见アニメーションパターン

某些アニメーションパターンで Web 界面中繰り返し出现。掌握これらのパターンのためにあなた提供するた大多数の常见 UI アニメーション需求のツール包。

1. フェードイン

最もシンプルかつ最も通用のエントランスアニメーション。元素から透明トランジションまで不透明：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

2. スライドアップフェードイン

一種のより动态の入场效果，組み合わせる垂直移动と透明度变化。これ创造た元素から下方まで达の感觉：

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUpFade 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

3. ホバースケール

ホバーする时微妙のスケーリング増やす提供するたさせる人満意の交互フィードバック：

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

4. スタッガードリストアニメーション

時に项目リスト出现时，のために各项目設定する交誤のアニメーションレイテンシできる作成する引导视线のカスケード效果：

.list-item {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpFade 0.3s ease-out forwards;
}

.list-item:nth-child(1) { animation-delay: 0.0s; }
.list-item:nth-child(2) { animation-delay: 0.05s; }
.list-item:nth-child(3) { animation-delay: 0.1s; }
.list-item:nth-child(4) { animation-delay: 0.15s; }
.list-item:nth-child(5) { animation-delay: 0.2s; }

に対して动态リスト，使用 JavaScript に基づいて各项目的インデックス設定する animation-delay，またはCSSカスタムプロパティの使用：style="animation-delay: calc(var(--i) * 0.05s)"。

5. ローディングスピナー

平滑の连续旋转は经典の読み込む指示器：

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

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

アニメーションのアクセシビリティ：prefers-reduced-motion

かつ非すべての用户すべて受益于アニメーション。に対して患あり前庭障碍、运动敏感または某些认知状况の人，アニメーションかもしれないをもたらす头晕、恶心または癫痫发作。prefers-reduced-motion 媒体クエリする許可するあなた尊重用户系统レベルのモーション削減設定。

モーション削減の実装

推奨するの方法はさせるアニメーション正未設定するモーション削減設定の用户有効化：

/* Default: no animation for users who prefer reduced motion */
.element {
  opacity: 1;
  transform: none;
}

/* Only animate for users who have no motion preference */
@media (prefers-reduced-motion: no-preference) {
  .element {
    animation: slideUpFade 0.5s ease-out forwards;
  }
}

または，あなた可思う設定モーション削減の用户無効化特定アニメーション：

.element {
  animation: slideUpFade 0.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Keep functional transitions but shorten duration */
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

残すものと削除するもの

時に用户設定モーション削減时，かつ非すべてのアニメーションすべてすべきられる削除する。传达意味またはステートの機能性アニメーション应予約，だけは簡素化する：

• 削除する：装饰性アニメーション、视差スクロールする、自动播放カルーセル、脉冲效果と循环背景アニメーション。
• 簡素化する：トランジション継続的に時間应缩短まで接近瞬时（0.01ms）そして非完全削除する，するためにステート变化まだ可感知。
• 予約：機能性ステートトランジション（ホバーする、フォーカスする、活动ステート）、入度指示器と任意の传达重する必要がある情報のアニメーション。

アニメーションライブラリ

だが CSS アニメーション処理する大多数の UI 需求，JavaScriptアニメーションライブラリ提供するた高级機能，如に基づく物理の运动、スクロールする閉联アニメーションと複雑序列のオーケストレーション。

CSSファーストのライブラリ

• Animate.css：预構築するの CSS アニメーション类集合。だけ需へ元素追加する类名即可適用するアニメーション。適合する高速プロトタイプ設計する，しかしもし過度の使用かもしれないをもたらす千篇一律の动效。
• Hamburgers：アニメーション汉堡メニューアイコントランジション集合，すべて用纯 CSS実装。

JavaScriptアニメーションライブラリ

• Framer Motion：React アニメーションライブラリ，提供する声明式アニメーション API，支持する弹簧物理、レイアウトアニメーションと手势支持する。React 適用するの最良選択する。
• GSAP (GreenSock)：最も強力の JavaScriptアニメーションライブラリ。提供する精密にの時間线制御する、複雑イージング、SVG 变形とスクロールするトリガーするアニメーション。られる大品牌に使用される营销Webサイトと互动体验。
• Anime.js：軽量级 JavaScriptアニメーションライブラリ，を持つ简洁の API。支持する CSS 属性、SVG、DOM 属性と JavaScript オブジェクト。CSS と GSAP の間の良良中间選択する。
• Motion One：に基づく Web Animations API 構築するの现代軽量アニメーションライブラリ。提供する最小化 API，支持する弹簧物理と時間线。

JavaScript と CSS の使い分け

CSS に使用される対応ステート变化の簡単声明式アニメーション。JavaScript に使用される：に基づく物理の运动（弹簧、动量）、スクロールする閉联アニメーション、を持つ精密に時間制御するの複雑序列、実行する时計算するの动态アニメーション参数，または必要とするもってプログラミング方式一時停止する、反转またはドラッグするのアニメーション。

アニメーションのデバッグ

アニメーション bug かもしれないとても微妙かつ難もって诊断。正しくのデバッグツールと技术させるたことがある程より一層効率的。

Chrome DevTools アニメーションパネル

Chrome DevTools を含む专门のアニメーションパネル，提供する強力のデバッグ機能：

• タイムラインビュー：查看ページ上すべての活动アニメーションおよび其継続的に時間、レイテンシとキーフレーム。
• 再生コントロール：するアニメーション减速まで 1/4 速度、一時停止するまたは逐帧拖动時間线。
• プロパティ検査：クリックする時間线中のアニメーション查看られるアニメーション確かに切 CSS 属性および其で各キーフレームの值。
• リアルタイム編集：なし需重新規読み込むページ即可リアルタイム変更するアニメーション継続的に時間、レイテンシとイージング。

パフォーマンスプロファイリング

使用 Chrome DevTools 中の Performance パネル识别アニメーション卡顿：

• でアニメーション実行する时录制パフォーマンス追跡する
• 検索する超たことがある 16.67ms 预算の帧（で帧图表中表示するのために赤色条）
• 確認するアニメーション帧中はいいえあり「Layout」操作する，これ表示レイアウトをトリガーの属性
• 使用「Rendering」オプション卡有効化「Paint flashing」（もって緑色表示する重绘区域）と「Layer borders」（表示するコンポジター层）

よくあるデバッグシナリオ

• アニメーション不実行する：確認する animation-fill-mode はいいえ設定する正しく。ない forwards または both，元素できる回までアニメーション前ステート。まだする必要がある検証する元素を持つ正しくの尺寸——transform: scale(0) させる元素できない见しかし仍存で。
• アニメーション卡顿：開く Performance パネル検索する長帧。確認するはいいえでアニメーションレイアウトをトリガーの属性。切り替えるまで transform と opacity。
• アニメーションレイテンシ感觉不正：记住 animation-delay でアニメーション開始する前作成する间隔。で此间隔期间，でない限り設定する animation-fill-mode: backwards または both，いいえすなわち元素表示するアニメーション前ステート。
• アニメーションで Chrome 中有効しかしで Safari 中無効：Safari 正 animation 简写の解析するより严格。確保するすべての值顺序正しくかつ未使用非対応の特徴。