CSS3はTransform、Transition、Animationの違いを一文でまとめています_html/css_WEB-ITnose

Transform: 要素を変換します。Transition: フラッシュ トゥイーン アニメーションと同様に、要素の 1 つ以上の属性 (時間など) の変更を制御します。しかし、重要な瞬間は 2 つだけです。始まりと終わり。アニメーション: フラッシュ トゥイーン アニメーションと同様に、要素の 1 つまたは複数の属性の変更 (時間など) を制御します。キーフレームは複数設定可能です。

5年かけて丁寧に開発されたUIフロントエンドフレームワーク！トランジションとアニメーション: トランジションではイベントをトリガーする必要がありますが、アニメーションではイベントをトリガーせずに時間の経過とともに要素 CSS の属性値を明示的に変更することもでき、それによってアニメーション効果を実現できます。