CSS: CSSアニメーション
最終更新：2026-10-13
1. @keyframes
様々なポイントでスタイルを指定して、アニメーションシーケンスを定義：
▶ サンプル
▶ 試してみよう2. animationプロパティ
(1) 早見表
| プロパティ | 値 | 用途 |
|---|---|---|
animation-name |
@keyframes name |
アニメーション名 |
animation-duration |
1s、500ms |
アニメーションの時間 |
animation-timing-function |
ease、linear、ease-in、ease-out |
速度カーブ |
animation-delay |
0.5s、-1s |
開始前の遅延 |
animation-iteration-count |
1、2、infinite |
再生回数 |
animation-direction |
normal、reverse、alternate |
再生方向 |
animation-fill-mode |
none、forwards、backwards、both |
前/後のスタイル |
(2) 省略形
CSS
.animation {
animation: slideIn 0.5s ease-out 0.2s infinite alternate forwards;
/* name duration timing-function delay iteration-count direction fill-mode */
}
3. よく使うアニメーション
(1) フェードイン
▶ サンプル
▶ 試してみよう(2) バウンス
▶ サンプル
▶ 試してみよう(3) ローディングスピナー
▶ サンプル
▶ 試してみよう4. パフォーマンスのヒント
🔥 パフォーマンス警告： 一度に多くの要素をアニメーションさせないでください。20〜30の要素を同時にアニメーションさせると、ジャギーが発生します。
will-changeを使用してブラウザにどの要素をアニメーションさせるかを伝えますが、乱用しないでください——will-change要素は追加のGPUメモリを消費します。
アニメーションに最適なプロパティ：
アニメーションを避けるべき：
width、height、margin、padding（リフローを引き起こす）box-shadow（計算コストが高い）
❓ よくある質問
Q @keyframesとtransitionの違いは何ですか？
A transitionは「状態Aから状態B」の単純な変更のみを処理します。@keyframesは複数のキーフレーム（0%、50%、100%）を定義でき、複雑な多段階アニメーションが可能です。シンプルなホバーエフェクトにはtransitionを、複雑な自動再生エフェクトには@keyframesを使用します。
Q animation: infiniteはラグを引き起こしますか？
A 合理的な使用では問題ありません。しかし、一度に多くの要素をアニメーションさせないでください（20以下を推奨）。
will-changeを使用してブラウザにどの要素が変更されるかを伝え、GPUアクセラレーションを助けます。ページがフレーム落ちする場合は、アニメーション要素を減らすか、持続時間を短くしてください。Q アニメーション後に要素がジャンプバック怎么办？
A
animation-fill-mode: forwardsを設定してください——アニメーション終了後に最後のフレームの状態を維持します。デフォルトはnoneで、開始位置に戻ります。📖 まとめ
@keyframesアニメーションはtransitionより強力で、多段階のアニメーションシーケンスを定義できますanimationのサブプロパティで、再生回数、方向、遅延、フィルモードなどを制御- アニメーションではパフォーマンスのために
transformとopacityを優先 - 無限ループ（ローディングスピナーなど）には
infiniteを使用
📝 練習問題
- 「バウンスボール」アニメーションを作成してください——ボールが落下し、跳ね返り、徐々に弱まります（多段階キーフレームを使用）。
- 「回転ローダー」を作成してください——リングが連続的に回転します（ヒント：border + border-top-color + border-radius + animation）。
- 「フェードインスライド」ページを作成してください：タイトルが上からスライド、段落が下から、画像が左から（異なるアニメーション）。
- 「呼吸光」ボタンを作成してください——ボタンの明るさがサイクルします。
