# transition と animation の違い

> hover・クラス切替など「状態の変化」に反応させるならtransition、読み込み時から自動で動く・ループする・多段階の動きならanimation（@keyframes）です。

- URL: https://www.css-dictionary.com/compare/transition-vs-animation/

## 比較表

| 観点 | transition | animation |
| --- | --- | --- |
| トリガー | 状態変化が必要（hover、クラス付替え等） | 適用された瞬間から自動で開始できる |
| 中間状態 | 始点と終点の2点のみ | @keyframesで何段階でも定義可能 |
| ループ | 不可 | infinite等で可能 |
| 逆再生 | 状態が戻れば自動で逆向きに再生される | animation-directionで制御 |
| 典型用途 | hoverエフェクト、開閉、テーマ切替 | ローディングスピナー、注目喚起、複雑な演出 |

## 使い分けの指針

UIの応答（押した・開いた・切り替えた）はtransitionが基本で、コードも短く状態戻りも自動です。自律的に動き続けるものだけanimationにします。どちらもprefers-reduced-motion対応をセットで入れるのが現代の作法です。

## AIがよくやる取り違え

AIはhoverで戻りのアニメーションが必要なだけの場面にも@keyframesを持ち出すことがあります。状態変化への反応ならtransitionで十分か、先に確認させると簡潔になります。

## それぞれの詳しい解説

- [transition](https://www.css-dictionary.com/property/transition.md)
- [animation](https://www.css-dictionary.com/property/animation.md)
- [keyframes](https://www.css-dictionary.com/property/keyframes.md)