CSS animation-composition
animation-composition属性：replace(默认/覆盖)/add(叠加多个动画效果/同时位移和旋转不冲突)/accumulate(积累/基于先前动画值继续)、多个动画作用于同一属性的复合方式 · 难度：入门 · +10XP
CSS animation-composition —— 多个动画如何组合效果
当一个元素同时运行多个动画，且它们作用于同一个CSS属性时，animation-composition决定动画效果如何叠加。比如一个动画让元素右移100px，另一个动画让元素下移50px。
三个值详解
| 值 | 行为 | 示例 |
|---|---|---|
| replace | 替换：后一个动画覆盖前一个的效果（默认） | 最终只执行最后一个动画 |
| add | 叠加：两个动画的效果相加 | 右移100px+下移50px=斜向移动 |
| accumulate | 累积：基于前一个动画的结束值继续 | 先右移再下移，不从原点重新开始 |
实际代码
.complex-animation {
animation:
slideRight 2s ease,
slideDown 2s ease 2s; /* 延迟2秒执行 */
animation-composition: accumulate; /* 第二段从第一段结束位置开始 */
}
@keyframes slideRight {
to { transform: translateX(200px); }
}
@keyframes slideDown {
to { transform: translateY(100px); }
}
动手练习
- 基础练习：做一个同时旋转+缩放的元素，用add让两个动画的效果叠加。
- 进阶应用：用accumulate做一个"L形移动"——元素先右移200px，再从那个位置下移100px。
- 项目实战：检查项目中同时有多个CSS动画的元素，用animation-composition确保它们按预期协同工作。