CSS动画叠加需合并声明，同名animation-name后声明覆盖前声明；transform动画应统一写入单个keyframes避免覆盖，opacity等可安全叠加。
animation-name 冲突导致动画覆盖
同一元素上写多个 animation 声明时，如果都用了 animation-name: slide; 这类同名动画，后声明的会覆盖前一个——不是叠加，是替换。浏览器只认最后一个同名动画定义。
- 用不同名字：比如
animation-name: fade-in, slide-from-left;，两个动画必须定义为独立的@keyframes - 不能靠重复写
animation: slide 1s; animation: rotate 0.5s;，第二行会完全覆盖第一行（animation是简写属性，全量重置） - 检查 DevTools 的 Computed 面板，看最终生效的
animation-name值是不是你预期的两个名称
CSS 动画叠加必须用 animation 属性合并写法
想让淡入 + 位移同时发生，只能把它们合并在一条 animation 声明里，用逗号分隔：
element {
animation: fade-in 0.3s ease-out, slide-up 0.4s cubic-bezier(0.2, 0.8, 0.4, 1) 0.1s;
}
- 每个动画的时长、缓动、延迟、迭代次数都要一一对应，顺序不能错：第一个
animation-duration对应第一个animation-name - 如果漏写某个子属性（比如只写了时长没写延迟），它会回退到初始值（
animation-delay: 0s），可能造成意外同步 - 不支持用
animation-play-state: paused单独控制其中一个动画，暂停会影响整条声明里的所有动画
transform 动画和非 transform 动画性能差异大
位移、缩放、旋转这类 transform 动画走 GPU 合成层，流畅；但 color、opacity（虽也硬件加速）、尤其是 height、margin 等触发布局重排的动画，会卡顿甚至掉帧。
- 优先把位移/旋转交给
transform，把透明度变化单独拆成opacity动画（它本身是合成属性，安全） - 避免在同一个动画里混用
transform: translateX(100px);和left: 100px;，后者强制触发 layout，拖慢整个动画流 - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，看哪些动画区域在频繁重绘
animation-fill-mode 影响动画结束后的状态叠加
两个动画时长不同，比如一个 0.3s 淡入，一个 0.6s 旋转，结束后元素最终停留的状态由各自 animation-fill-mode 决定——不是谁后结束谁赢，而是各自按规则保留末帧。
立即学习“前端免费学习笔记（深入）”；
- 默认
animation-fill-mode: none，动画一停就回退到原始样式，可能让另一个还在运行的动画看起来“跳变” - 常用组合是
forwards：让每个动画都保持最后一帧的样式，但要注意冲突，比如一个设了transform: scale(1)，另一个设了transform: rotate(90deg)，后者会覆盖前者（transform 值不可自动合并） - 真要叠加 transform 效果，得手动写成单个 keyframes：
transform: scale(1) rotate(90deg);，而不是拆成两个动画
transform: translate() 把旋转冲掉了。 
