CSS支持在同一animation属性中用逗号分隔多个动画名，浏览器按顺序一一匹配时长、延迟等参数；各动画独立控制缓动、循环等，但数量须一致，否则错位或回退默认值；同属性冲突时后声明者覆盖前者。
animation属性里写多个动画名，用逗号分隔就行
CSS支持在同一元素上叠加多个动画，关键不是套多层标签，而是把多个动画名、时长、延迟等参数用逗号并列写进animation简写属性里。浏览器会按顺序一一对应解析：第一个动画名匹配第一个时长、第一个延迟……以此类推。
常见错误是以为要写多遍animation，或者误用animation-name单独设多次——这只会覆盖，不会叠加。
-
animation: fade-in 0.3s, slide-up 0.5s ease-out 0.1s, pulse 2s infinite;是合法的 -
animation-name: fade-in; animation-name: slide-up;后者会完全取代前者 - 动画数量必须和其它参数（如
animation-duration）个数一致，否则错位或被忽略
每个动画独立控制timing-function和iteration-count
多个动画可以各自有不同的缓动曲线、循环次数和方向，但必须在简写中对齐位置，不能“跳着写”。一旦某一项缺失（比如漏了某个animation-iteration-count），它会回退到初始值1，而不是继承前一个动画的值。
例如想让淡入执行一次，滑动执行一次，脉冲无限循环，就必须显式写出三个animation-iteration-count值：
立即学习“前端免费学习笔记（深入）”；
animation: fade-in 0.3s, slide-up 0.5s, pulse 2s; animation-iteration-count: 1, 1, infinite;
如果只写animation-iteration-count: infinite;，那三个动画全变成无限循环。
动画冲突时，transform和opacity优先级最高
当多个动画同时修改同一CSS属性（比如两个动画都改transform），后声明的动画会覆盖先声明的——不是混合，是替换。这点特别容易踩坑，尤其是用第三方动画库+自定义动效时。
- 两个动画都设
transform: translateX()→ 只有第二个生效 - 一个动画改
transform，另一个改opacity→ 互不干扰，正常叠加 - 想组合位移+旋转，必须写在一个动画里，或确保它们操作的是不同属性（如
transformvsfilter）
Chrome DevTools里查多动画状态很麻烦
DevTools的“Animations”面板默认只显示当前选中元素的**首个**动画，其余动画得手动点开animation属性展开查看，且不显示实时进度条。调试时容易误判某个动画没触发，其实是它被折叠了。
更可靠的做法是加临时animation-play-state: paused;，再逐个取消注释来隔离验证；或者用@keyframes里加background色块辅助肉眼观察是否在跑。
另外注意：Safari对多动画的animation-fill-mode支持不稳定，forwards可能只对第一个动画生效，iOS上务必真机测试。
