17370845950

动画可自动播放，过渡需状态变化触发；transition依赖:hover等状态改变才生效，animation通过@keyframes定义并可自启、循环、暂停。

动画（animation）和过渡（transition）最核心的区别在于：过渡需要“状态变化”来触发，而动画可以自动播放。

transition 必须依赖状态变化

transition 不是独立运行的，它只在元素的 CSS 属性值发生改变时起作用——比如鼠标悬停（:hover）、焦点获取（:focus）、类名切换（JavaScript addClass）等。没有状态变化，它就完全不生效。

• 写好了 transition: all 0.3s，但没加 :hover 或没改 class？→ 看不到任何效果
• 改了颜色但没写 transition: color 0.3s？→ 颜色瞬间跳变，没有渐变过程
• 想让元素一加载就动？transition 做不到，它不监听初始渲染

animation 是主动声明的播放流程

animation 是你提前定义好关键帧（@keyframes），再通过属性控制它何时、如何播放。它可以自动开始、循环、暂停，甚至不需要用户交互。

• 用 animation: slideIn 1s ease-out + @keyframes slideIn {...}，元素加载后就能自己滑入
• 配合 animation-delay 可以错开多个动画启动时间
• 用 animation-play-state: paused 还能手动控制暂停/继续

一个对比小例子

让按钮背景色从蓝变红：

• 用 transition：必须写 button { background: blue; transition: background 0.4s; } button:hover { background: red; }
• 用 animation：定义 @keyframes changeBg { from { background: blue; } to { background: red; } }，再给按钮加 animation: changeBg 0.4s forwards;，它就会自己执行一遍

初学者实用判断口诀

想实现效果时，先问自己：

• 这个变化是不是由用户操作（如 hover、点击）或 JS 改样式引起的？→ 优先用 transition
• 这个动效是否要自动播放、循环、或包含多步复杂运动（比如弹跳、路径移动）？→ 选 animation
• 只想让某个属性平滑变化，且只在两个状态间切？→ transition 更轻量、易维护