多组animation值会拆分为独立动画轨道并行播放，但操作同一css属性（如transform）时后声明的会覆盖前声明的，无法叠加；需合并至同一@keyframes中实现真正叠加。
animation属性写多组值时，浏览器怎么合并执行
多组 animation 值（用逗号分隔）会被拆成独立的动画轨道，各自按自己的 animation-name、animation-duration 等生效，互不干扰。不是“叠加效果”，而是“并行播放”。
常见错误现象：animation: fade 1s, slide 2s; 写了但只有 fade 动，或位移错乱——大概率是两个动画操作了同一个 CSS 属性（比如都改 transform），后声明的覆盖前声明的。
- 每个动画轨道独立计算自己的关键帧，但最终渲染时只取「同一时刻各轨道对同一属性的最新计算值」
- 如果两个动画都定义了
transform，浏览器不会把它们相加，而是用后一个动画在该时刻输出的transform值（顺序由逗号位置决定） - 想真正叠加（比如同时缩放+旋转），必须把所有变换写进同一个
@keyframes里，或用transform: scale() rotate()合并在一条声明中
多个animation同时作用于transform，为什么只看到一个动效
因为 transform 是单值属性，CSS 不支持多动画对该属性做数学叠加（如 scale × rotate）。浏览器只保留最后执行的那个动画所设置的完整 transform 值。
使用场景：你想让元素一边淡入一边向右滑入再轻微上浮——这三个动作若拆成三个独立 animation，且都操作 transform 或 opacity，就会互相覆盖。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：把位移 + 缩放 + 旋转全写进一个
@keyframes moveIn里，用一条animation: moveIn 0.6s ease-out; - 错误写法：
animation: fadeIn 0.3s, slideRight 0.4s, floatUp 0.5s;—— 三者都设transform，最终只生效floatUp的结果 - 例外：opacity / visibility / filter 这类属性支持多动画共存（因为它们天然可叠加），但
transform和color不行
animation-delay和animation-fill-mode在多组动画中的行为差异
每组动画的 animation-delay 和 animation-fill-mode 是独立解析的，但「填充行为」可能因时间错位导致视觉跳变。
性能影响：多个动画即使 delay 很大，也会在元素挂载时立即注册监听，增加样式计算开销；尤其当其中一组用了 animation-fill-mode: backwards，会强制应用首帧样式，可能触发意外重排。
-
animation: a 1s 0s backwards, b 1s 0.5s backwards;→a立即显示首帧，b在 0.5s 后才开始，并立刻回填自己的首帧（可能覆盖a的效果） - 避免混用不同
fill-mode：比如一个用forwards，另一个用backwards，容易造成初始态/结束态冲突 - 调试技巧：临时给每组动画加不同
animation-direction: reverse或极短duration，观察各轨道起始点是否符合预期
用CSS自定义属性配合多组animation实现动态控制
纯 CSS 无法在运行时修改某组动画的参数（比如改 animation-duration），但可以用 --var 控制关键帧内部的计算值，绕过「多组动画参数不可单独更新」的限制。
容易踩的坑：自定义属性不能直接用于 animation 简写值中（如 animation: slide var(--dur) ease; 无效），只能在 @keyframes 里用 calc() 或函数调用引用。
- 可行方式：
@keyframes slide { to { transform: translateX(calc(var(--dist) * 1px)); } } - 不可行方式：
animation: slide var(--dur), fade var(--fade-time);—— 浏览器会忽略整条声明 - 兼容性注意：Safari 15.4+ 才支持
calc()在@keyframes中读取自定义属性；旧版本需 JS 注入关键帧或降级为单动画
多组 animation 看似灵活，实际约束集中在「属性覆盖规则」和「fill-mode 时间窗口冲突」上。最常被忽略的是：你以为在叠加动画，其实只是在切换同一属性的输出源。
