CSSアニメーション入門 — transition と @keyframes の使い分け

transition と @keyframes の違い

transition — 状態Aから状態Bへの「変化」を補間する。クリック・ホバーなどユーザー操作のトリガーが必須。

@keyframes — タイムラインを定義し、複数の状態を経由する複雑なアニメーションを作る。自動再生も繰り返しも可能。

シンプルなホバー効果なら transition、ローディングスピナーや連続再生する装飾なら @keyframes が向いています。

transition の基本構文

transition: <property> <duration> <timing-function> <delay>;

例：transition: opacity .3s ease-out; — opacityを0.3秒でease-outして変化

複数プロパティを別々の duration で動かすこともできます：transition: opacity .3s ease, transform .5s cubic-bezier(.4,0,.2,1);

all を使う方法もありますが、不要なプロパティまでアニメーション対象になり性能を損なうため非推奨。

@keyframes の基本構文

@keyframes fadeUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }

適用は：.element { animation: fadeUp .8s ease-out forwards; }

from/to の代わりに 0% / 50% / 100% で中間状態も指定可能。

forwards で終了状態を保持、infinite で無限ループ、alternate で往復再生。

timing-function を使いこなす

linear — 等速。機械的で人工的な印象。ローディングスピナーには向くが、UI要素には不向き。

ease-out — 終わりに向けて減速。最も自然で頻繁に使われる。

cubic-bezier(.68,-.55,.27,1.55) — オーバーシュート（行き過ぎて戻る）でバウンス感を出せる。

cubic-bezier(.4,0,.2,1) — Material Design 標準。フラットで上質。

パフォーマンス最適化

transform と opacity だけを動かす — これらは GPU レイヤーで処理されるため、最も軽量。top/left/width/height は重い。

will-change: transform; — ブラウザに事前最適化を伝える。ただし乱用は禁物、必要な要素にだけ。

prefers-reduced-motion — モーション低減設定のユーザーには静止画を見せる：@media (prefers-reduced-motion: reduce) { *{animation:none!important; transition:none!important; } }