比較記事一覧に戻る
transition と animation の違い
TL;DR — ひとことで言うと
hover・クラス切替など「状態の変化」に反応させるならtransition、読み込み時から自動で動く・ループする・多段階の動きならanimation（@keyframes）です。
比較表
| 観点 | transition | animation |
|---|---|---|
| トリガー | 状態変化が必要（hover、クラス付替え等） | 適用された瞬間から自動で開始できる |
| 中間状態 | 始点と終点の2点のみ | @keyframesで何段階でも定義可能 |
| ループ | 不可 | infinite等で可能 |
| 逆再生 | 状態が戻れば自動で逆向きに再生される | animation-directionで制御 |
| 典型用途 | hoverエフェクト、開閉、テーマ切替 | ローディングスピナー、注目喚起、複雑な演出 |
使い分けの指針
UIの応答（押した・開いた・切り替えた）はtransitionが基本で、コードも短く状態戻りも自動です。自律的に動き続けるものだけanimationにします。どちらもprefers-reduced-motion対応をセットで入れるのが現代の作法です。
🤖 AIがよくやる取り違え
AIはhoverで戻りのアニメーションが必要なだけの場面にも@keyframesを持ち出すことがあります。状態変化への反応ならtransitionで十分か、先に確認させると簡潔になります。