transition适合状态切换，animation适合多阶段循环动画；transition声明属性变化的过渡方式，animation通过时间轴控制关键帧；二者应按需混用并关注性能。
transition 适合状态切换，不是动画控制台
如果你要实现“鼠标悬停变色”“按钮点击缩放”这类有明确起点和终点的状态变化，transition 是更轻、更语义化的选择。它不描述过程，只声明“当某个属性变了，用什么方式过渡过去”。
常见错误是拿 transition 去做多阶动画（比如先平移再旋转再透明），结果发现加了 transition: all 0.3s 后所有属性一锅炖，鼠标快速进出时动画队列卡住、跳帧，甚至触发多次重排。
- 只对可计算的 CSS 属性生效（
transform、opacity、color等），display、height（从0到auto）这类不支持过渡 - 必须依赖属性值的显式变更：靠 JS 改
className或直接设style.opacity才能触发，单纯 class 存在但没变化不会动 - 性能敏感场景优先用
transform和opacity，避免触发布局（width、left）导致重排
@keyframes 动画适合节奏可控、多阶段或循环行为
需要循环播放、暂停/逆播、精确控制中间关键帧（比如 loading 图标转三圈后抖一下），就得上 @keyframes + animation。它本质是时间轴驱动，和元素当前状态解耦。
典型翻车现场：用 animation 实现一个“hover 弹出菜单”，结果鼠标一进一出就反复触发，动画重头开始，体验像抽搐；或者忘了加 animation-fill-mode: forwards，动画一结束立刻回退到初始态，UI 断层。
立即学习“前端免费学习笔记（深入）”；
-
animation-play-state可以暂停，animation-direction: reverse能倒放，animation-iteration-count: infinite支持循环——transition完全没有这些能力 - 动画中修改
transform不会打断当前动画，但改transition相关属性（如transition-duration）会重置整个过渡流程 - 注意兼容性：
@keyframes在 IE10+ 支持，但部分老 Android WebView 对animation-timing-function的贝塞尔曲线解析不准
JS 控制动画时，别直接操作 style 写 transition
想用 JS 触发动画？别在代码里反复写 el.style.transition = 'opacity 0.2s' 再改 el.style.opacity。这样极易引发样式冲突、过渡被覆盖、或因浏览器渲染时机问题导致动画不触发。
真实项目里最稳的方式是：用 class 切换驱动 transition，或用 element.animate()（Web Animations API）接管关键帧逻辑。
- 推荐模式：
el.classList.add('is-open')，CSS 里写.is-open { opacity: 1; transform: translateY(0); }+ 对应transition - 需要 JS 动态控制进度（比如拖拽中实时更新动画位置），用
el.animate(keyframes, options)，它返回Animation实例，可调pause()、currentTime等 - 慎用
getComputedStyle(el).opacity做过渡判断——它返回字符串（如"1"），且强制同步布局，高频读取会卡顿
性能分水岭：硬件加速不是万能开关
很多人以为加个 transform: translateZ(0) 或 will-change: transform 就能“开启 GPU 加速”，实际效果常不如预期，甚至引发更多内存占用和闪烁。
真正起效的前提是：该元素确实被提升为独立图层，且变化属性不触发重排重绘。否则只是白费力气，还可能让低端设备更卡。
-
transform和opacity天然触发合成层，但频繁创建新图层（比如给几十个列表项都加will-change）会导致内存暴涨 -
will-change应该在动画开始前 1–2 帧提前设置，动画结束后及时清除，而不是长期挂载在 class 上 - 用 Chrome DevTools 的
Layers面板确认是否真生成了独立图层，别只看“GPU Accelerated”字样
复杂交互动画里，transition 和 animation 往往得混用：用 transition 做主交互反馈，用 animation 处理装饰性循环动效，并始终盯着主线程帧率和图层数量——这点容易被忽略，但决定了用户滑动页面时是跟手还是发飘。
