CSS キーフレームアニメーションはどのように機能しますか?

Question

IT Interview Practice · Accepted Answer

トランジションが*2つの状態の間を*アニメートする一方で、**`@keyframes` アニメーション**は、自動的に実行でき、ループでき、多くの中間状態を通過できるマルチステップシーケンスを定義します。

## アニメーションの定義と適用

```css
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; } /* 0% */
  to   { transform: translateX(0);     opacity: 1; } /* 100% */
}

.panel {
  animation: slide-in 0.5s ease-out;
}
```

## パーセンテージを使用したマルチステップキーフレーム

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* peak of the bounce */
  100% { transform: translateY(0); }
}
```

パーセンテージを使用すると、1つのアニメーション内で複数のステージをコレオグラフできます — シンプルなトランジションでは不可能です。

## 完全なアニメーションショートハンド

```css
.spinner {
  animation: spin 1s linear infinite;
  /*         │    │    │      └── iteration-count (infinite = loop forever) */
  /*         │    │    └───────── timing function */
  /*         │    └────────────── duration */
  /*         └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
```

その他のプロパティ: `animation-delay`、`animation-direction: alternate` (ピンポン)、`animation-fill-mode: forwards` (最終状態を保持)、`animation-play-state: paused`。

## パフォーマンス — transform/opacity のみをアニメート

```css
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad  { to { width: 300px; top: 50px; } }
```

キーフレームアニメーションはフレームごとに実行されるため、レイアウトをトリガーするプロパティをアニメートすることは、`transform`/`opacity` をアニメートすることより遥かにコストがかかります。

## アクセシビリティ

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* honor users sensitive to motion */
}
```

## なぜ重要なのか

キーフレームアニメーションは、ローダー、注意喚起、入場エフェクト、およびトランジションでは表現できないループエフェクト (マルチステップ、自動実行、無限) を駆動します。

ショートハンドを知り、滑らかさのために `transform`/`opacity` に固執し、`prefers-reduced-motion` を尊重することで、パフォーマンスとアクセシビリティを保つ豊かなモーションを構築できます。

アニメーションの定義と適用

パーセンテージを使用したマルチステップキーフレーム

完全なアニメーションショートハンド

パフォーマンス — transform/opacity のみをアニメート

アクセシビリティ

なぜ重要なのか

関連する質問