CSSアニメーション とは？

CSSだけでウェブページの要素に動きを付ける技術だよ。ボタンをホバーしたときに色がふわっと変わったり、ページを開いたときに要素がスライドして現れたりする、あの動きのことだね。

transitionは「AからBへの変化を滑らかにする」もの。ホバーしたとき色が0.3秒かけてゆっくり変わる、みたいな単純な遷移に使う。@keyframesは「0%のとき→50%のとき→100%のとき」みたいに途中の状態も細かく指定できるから、ローディングスピナーのようなずっと動き続けるアニメーションが作れるんだ。

単純な動きならCSSの方がパフォーマンスが良いよ。CSSアニメーションはブラウザが最適化してGPUで処理してくれるから滑らかに動く。複雑な制御（スクロール位置に連動する、条件で分岐するなど）が必要な場合はJavaScriptを使うのが良いね。

パフォーマンスの罠があるんだ。CSSで動かせるプロパティは大きく2種類あって、transformとopacityは「GPUで処理される（コンポジットレイヤー）」から高速。一方widthやheightやtop、marginなどを動かすと「レイアウトの再計算（リフロー）」が毎フレーム発生して、ガクガクになる。だから「左に動かす」のにleftを使うのではなくtranslateXを使うのが鉄則。さらにwill-changeプロパティで事前にブラウザにアニメーションを通知できるんだけど、多用するとメモリを消費する。また、prefers-reduced-motionメディアクエリで「動きを減らしたい」ユーザーへの配慮も忘れてはいけないポイントだよ。