多属性组合动画需合并至同一@keyframes或transition声明，避免覆盖；transform和opacity可硬件加速且安全共存；animation-fill-mode:forwards仅保持动画结束瞬间样式，需手动补最终态；错开启动优先用animation-delay而非setTimeout。
多属性组合动画不是把几个 animation 写在一起就能生效——CSS 不允许多个同名动画属性叠加，必须合并进同一套 @keyframes 或用 transition 统一控制可变属性。
多个 transform + opacity 同时动，别拆成多个 animation
常见错误是给同一个元素写两套 @keyframes：一套控制 transform: translateX，另一套控制 opacity，再分别用 animation 绑定。浏览器只会取最后一个声明的动画，前面的被覆盖。
- 正确做法：把所有要变的属性写进一个
@keyframes里，比如0%和100%都同时定义transform和opacity -
transform和opacity是仅有的两个能触发硬件加速的常用属性，组合它们不会掉帧；但加进width、height或background-color就可能触发重排或低效重绘 - 如果用
transition，也必须在一条声明里写全，例如：transition: transform 0.3s ease, opacity 0.3s ease；漏掉逗号或写成两行会失效
animation-fill-mode: forwards 不等于“保持最终样式”
很多人以为加了 animation-fill-mode: forwards，动画结束后元素就永远停在最后一帧。实际上它只保证动画播放完成后的那一瞬间样式被保留，一旦你后续用 JS 改了 transform 或 opacity，那个“保留态”立刻被覆盖。
- 真正需要持久态时，得手动补上最终样式，比如动画结束在
transform: scale(0.8) translateY(-20px)，就在 CSS 里额外写一条.element { transform: scale(0.8) translateY(-20px); } - 若动画由 JS 触发（如添加 class），建议用
animationend事件监听后显式设置内联样式，避免 CSS 层级干扰 -
forwards对transition无效，那是animation专属属性
多个动画错开启动，优先用 animation-delay 而非 setTimeout
想让一组卡片依次淡入+上浮，有人用 JS 循环调 setTimeout(() => el.classList.add('animate'), i * 200)。这会导致动画时间不精准、无法暂停、且和屏幕刷新率不同步。
立即学习“前端免费学习笔记（深入）”；
- 静态列表直接用
:nth-child(n)配合animation-delay，例如.card:nth-child(1) { animation-delay: 0s; }、.card:nth-child(2) { animation-delay: 0.2s; } - 动态渲染的列表（如 React/Vue 渲染），用 JS 批量设
el.style.animationDelay = `${i * 0.2}s`，比操作 class 更轻量、更可控 - 注意：
animation-delay为负值时，动画会从中间某一帧开始播放，不是“提前启动”，容易误判时序
组合动画最难的不是写法，而是判断哪些属性能安全共存、哪些会互相干扰。比如 transform: scale() 和 transform: rotate() 必须写在同一声明里才能合成，分开写会后者覆盖前者；而 opacity 和 filter: blur() 组合时，部分旧版 Safari 会丢掉 blur 效果——这些细节不测真机根本发现不了。
