过渡适合状态切换，动画适合帧序列；前者依赖触发自动补间，后者通过@keyframes定义多阶段运动并支持精细控制。
过渡（transition）适合状态切换，动画（animation）适合帧序列
过渡是元素在两个状态之间自动补间的变化，比如 hover 时颜色或尺寸改变；动画则是预先定义关键帧（@keyframes），可循环、可控制播放节奏、能描述多阶段运动。如果你只需要“从 A 变到 B”，用 transition 更轻量；如果要实现“先放大、再旋转、最后淡出”，就得用 animation。
-
transition必须依赖触发（如伪类、class 切换、JS 修改样式），没有显式播放控制 -
animation可以自动播放（animation-play-state: running），也可暂停、反向、设延迟和迭代次数 - 过渡不能复用——每个属性变化都要单独写
transition；动画通过@keyframes定义一次就能多处复用 - 过渡不支持中间状态命名，动画可通过
0%, 50%, 100%精确控制任意时刻的样式
transition 的常见误用：忘了加触发源或写错属性名
很多人写了 transition: all 0.3s 却没效果，根本原因是没让 CSS 属性真正“变”——比如只写了初始态，没写 hover 态，或 JS 中修改的是 style.left（非 CSS 可过渡属性）。过渡只对可计算、可插值的属性生效（如 opacity、transform、color），不支持 display、height（未设具体值时）、font-size（若单位混用如 em 和 px 可能失效）。
- 确保目标属性在触发前后有明确的起始值和结束值（例如
height: 0→height: 200px，不能是height: auto） - 避免用
transition: all，它会过渡所有变化属性，可能引发意外行为（比如意外过渡了box-shadow） - 过渡时间写成
0.3s而非300ms更易读，但两者等价；注意浏览器对小数毫秒（如0.016s）的支持不稳定
animation 的性能陷阱：别在 keyframes 里改 layout 属性
动画每帧都会触发重排（reflow）如果操作了 width、height、top、left 这类影响布局的属性，卡顿几乎是必然的。现代浏览器对 transform 和 opacity 做了硬件加速优化，应优先使用它们实现位移、缩放、透明度变化。
标贝科技
标贝科技-专业AI语音服务的人工智能开放平台
下载
- 把
left: 100px改成transform: translateX(100px)，性能提升明显 - 避免在
@keyframes中设置margin或padding，它们会触发 layout - 用
will-change: transform提前告知浏览器该元素将动画，但别滥用——它会提前创建图层，增加内存开销 - 动画时间过短（
0.1s）或过长（5s）都影响体验；建议主流交互保持在0.2s–0.4s
混合使用 transition 和 animation 的边界在哪
可以共存，但要注意覆盖逻辑：animation 的 keyframes 会覆盖 transition 的同名属性变化。比如你同时设置了 transition: opacity 0.3s 和 animation: fade-in 1s，且两者都动 opacity，那么动画期间 transition 不生效。
- transition 适合用户交互响应（如按钮按下的反馈），animation 适合页面加载动效、loading 指示器、复杂交互动画
- JS 控制动画时，用
element.animate()（Web Animations API）比硬切 class 更灵活，但它和 CSSanimation同样受@keyframes限制 - 需要 JS 监听动画完成？用
animationend事件，不是transitionend；两者事件名不同，别混淆
过渡和动画不是非此即彼的选择，而是响应式设计中不同粒度的工具。真正容易被忽略的是：**过渡依赖状态变更的“时机”，动画依赖关键帧的“精度”——漏掉任一端，效果就断在半路。**