CSS如何使得两重动画互不干扰地应用在同一物体

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 值的覆盖关系——它不像 opacity 或 color 那样能自然叠加，每次新 transform 都会完全取代旧值。这点很容易被忽略，调了半天发现旋转没生效，其实是位移动画的 transform: translate() 把旋转冲掉了。