面试题：transition 和 animation 区别？

transition

• 状态 A → B 之间的补间，需触发（hover、class 切换等）。
• 属性：property、duration、timing-function、delay。
• 简单交互反馈首选。

animation + @keyframes

• 多关键帧、可循环、正反向、独立时间轴。
• 适合加载动画、复杂动效；可用 animation-play-state 暂停。

性能提示

优先动画 transform、opacity（常可走合成层）；慎动 width/height/top/left（易布局与重绘）。

will-change

提示浏览器优化，滥用占内存；动效结束宜移除。