CSSアニメーションとは？
CSSアニメーションを使うと、JavaScriptなしでHTML要素をアニメーション化できます。@keyframesルールでアニメーション状態を定義し、animationショートハンドプロパティでタイミング、再生時間、繰り返しを制御します。CSSアニメーションはGPUアクセラレーションされ、トランジション、ホバー効果、ローディングインジケーターに適しています。
アニメーションプロパティ
- animation-name：
@keyframesルールを参照。 - animation-duration：1サイクルにかかる時間（例：1s、500ms）。
- animation-timing-function：速度カーブ（ease、linear、ease-in-outなど）。
- animation-iteration-count：アニメーションの繰り返し回数（数値または
infinite）。
よくある質問
CSSアニメーションとJavaScriptアニメーションのどちらが良いですか？
シンプルなトランジションや装飾効果には、GPUにオフロードできるCSSアニメーションの方がパフォーマンスが良い場合が多いです。JavaScriptアニメーションは複雑でインタラクティブな、物理ベースのシーケンスに適しています。
1つの要素に複数のアニメーションを組み合わせることはできますか？
はい。animationプロパティで複数のアニメーション値をカンマで区切ります。各アニメーションに独自のキーフレーム、再生時間、タイミング関数を設定できます。