CSS アニメーションの基礎 — @keyframesとtransitionの使い分け
CSSアニメーションはJavaScriptなしでスムーズなUI演出を実現できます。transitionとanimationの2つの仕組みを理解することで、ホバーエフェクトから複雑なループアニメーションまで幅広く実装できます。
transitionとanimation（@keyframes）の違い
transitionは「ある状態から別の状態への変化」を補間するだけで、始点と終点の2状態が必要です。CSSプロパティが変化するとき（ホバー・クラスの付け替えなど）に自動的に適用されます。animationは@keyframesで定義した「中間状態を含む複数のフレーム」をループ・逆再生・遅延などの細かい制御のもとで再生できます。
GPUに最適化されたプロパティを使う
CSSアニメーションでは可能な限りtransform（translate・rotate・scale）とopacityのみを動かすのが推奨です。この2つはGPUで処理されCompositor層で動くため、JavaScriptの処理を止めることなく60fpsでスムーズに動作します。width・height・top・leftのアニメーションはLayout・Paintのトリガーとなり重くなります。
will-changeによる最適化
will-change: transformを指定すると、ブラウザがその要素をコンポジットレイヤーに昇格させてアニメーションのパフォーマンスを改善できます。ただし使いすぎるとメモリを消費するため、アニメーションが始まる直前に付与し終わったら削除するのが理想です。
CSS Animation Builderの使い方
CSS Animation Builderではtranslate・rotate・scale・opacity・filter・border-radiusのアニメーションパラメータをGUIで設定し、@keyframesとanimationプロパティのコードをリアルタイム確認しながらコピーできます。デスクトップ版では複数のkeyframeを追加してより複雑なアニメーションを定義できます。