css animation简写支持多动画并行，需用英文逗号分隔且各子属性值数量一致、顺序严格对应；缺省项取默认值，错位会导致解析异常；同属性冲突时默认replace，叠加需animation-composition。
animation 简写中多个动画怎么用逗号分隔
直接在 animation 属性值里用英文逗号分隔每组完整动画定义，就能同时触发多个动画。这不是“叠加语法糖”，而是 CSS 标准支持的并行机制——只要各参数数量一致、顺序对齐，浏览器就按列解析。
常见错误是只写一个 animation-duration 却期望控制多个动画节奏，结果只有第一个动画生效，其余退为默认时长（0s）。
- 必须保证
animation-name、animation-duration、animation-delay等子属性的值个数完全相同 - 缺失某项（如没写
animation-fill-mode）会导致该位置所有动画都取默认值none - 简写中未显式声明的子属性（如
animation-direction）不会继承前序规则，一律重置为normal
animation 简写参数顺序不能错位
animation 简写要求严格的位置对应：每个逗号分隔的片段，都必须按「名称、时长、缓动函数、延迟、循环次数、方向、填充模式、播放状态」顺序书写。错一位，整列参数就会偏移，轻则动画乱序，重则静默失效。
比如你想让 slideIn 和 fadeIn 同时启动、但 spin 延迟 0.3s，下面这样写就错了：
animation: slideIn 0.6s ease-out, fadeIn 0.6s ease-in, spin 1.5s linear 0.3s;
问题在于第三项少了 iteration-count 和 fill-mode，导致浏览器把 0.3s 当作 animation-iteration-count，而把后续本该属于 spin 的 iteration-count 丢弃。正确写法是补全所有字段：
animation: slideIn 0.6s ease-out 0s 1 forwards, fadeIn 0.6s ease-in 0s 1 forwards, spin 1.5s linear 0.3s infinite none;
多个动画改同一个属性时谁生效
如果两个动画都修改 transform，浏览器默认用 replace 模式——后声明的动画完全覆盖前一个在该属性上的输出。想让它们叠加（比如平移 + 旋转同时存在），必须显式加 animation-composition: add 或 accumulate，且仅对 transform 和 filter 有效。
-
animation-composition: replace（默认）：后动画的transform值直接替换前动画的，不合并 -
animation-composition: add：数值型变换（如translateX、blur）相加 -
animation-composition: accumulate：矩阵级运算，更适合连续旋转/缩放，但 Safari 当前支持不稳定
注意：animation-composition 单独写没用，必须配合多动画声明才起效；改 opacity 或 background-color 时它完全不参与计算。
调试多个 animation 简写时容易忽略的点
DevTools 的 computed 面板里，animation 展开后显示的是最终解析结果，不是你写的源码。如果看到某个动画的 delay 是 0s 而你写了 0.2s，大概率是参数列长度不匹配，浏览器自动用默认值填空了。
- 上线前务必在 Chrome、Safari、Firefox 中检查 computed
animation值是否与预期一致 - 避免混用简写和展开写法（如一边用
animation:，一边又单独写animation-duration:），后者会覆盖前者对应字段 - 移动端 iOS Safari 对
animation-composition: accumulate仍可能 fallback 到replace，关键路径建议降级为单动画或合并进同一@keyframes
最稳妥的做法：先用分开的 animation-name / animation-duration 等属性写清楚逻辑，确认行为正确后再压缩成简写——别为了省几行代码，把动画时序搞成玄学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
