能实现，但多组animation是并行播放而非数学叠加；若多个动画都修改transform，后声明的会覆盖前一个，必须合并到同一@keyframes中才能同步生效。
能实现，但“叠加”不是数学相加，而是并行播放+层叠覆盖；真正想让 transform 同时生效，必须合并进同一个 @keyframes。
animation 多组值写法：语法合法 ≠ 效果如预期
写 animation: fade 0.3s, slide 0.4s, spin 0.5s; 是合法的，浏览器会解析为三个独立动画轨道，各自运行。但问题在于：
- 每个轨道都单独计算自己的关键帧，不共享时间轴对齐逻辑
- 如果
fade和slide都设置了transform，后声明的slide会完全覆盖fade的transform值（CSS 层叠规则） - 你看到的“只有位移没淡入”，往往是因为
fade改的是opacity，而slide改的是transform——这两类属性互不干扰，本该都生效；但如果两个动画都动transform，就只剩最后一个
transform 动画为什么不能靠多组 animation “拼起来”
transform 是单值属性，浏览器不会把 translateX(100px) 和 rotate(45deg) 自动合成一条声明；它只取「当前时刻、最后执行的那个动画所输出的完整 transform 值」。
- 错误示例：
@keyframes fade { to { opacity: 0.5; } }+@keyframes move { to { transform: translateX(100px); } }，再用animation: fade 0.3s, move 0.3s;→ 最终只有translateX(100px)生效，opacity可能也被覆盖（取决于顺序和是否同名） - 正确做法：把所有变换写进一个
@keyframes，例如transform: translateX(100px) rotate(45deg) scale(0.9); - 性能也更好：单次 GPU 合成 vs 多次重算并覆盖
哪些属性可以安全共存于多组 animation 中
只要不操作同一属性，多组 animation 就能真正并行、互不干扰：
-
opacity和transform：可同时用，无冲突 -
filter: blur()和color：可共存（但color触发 paint，慎用） -
box-shadow和background-color：支持，但后者可能触发重绘 - 绝对不要：多个动画都设
transform、都设left、都设height—— 必然覆盖或强制 layout
调试多组 animation 时最容易忽略的一点
Chrome DevTools 的 “Animations” 面板默认只显示第一个动画；即使你写了三组 animation，面板里可能只列了 fade，让你误以为 slide 和 spin 没触发。
- 真要确认是否运行：打开 Elements 面板 → 找到元素 → 展开
animation计算值 → 看animation-name是否列出全部名称 - 临时加
animation-play-state: paused;，再逐个取消注释动画声明，肉眼验证每条是否生效 - 别依赖
animation-delay错开时间来“模拟叠加”——那只是错峰播放，不是同步协同
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
