答案：通过animation-name用逗号分隔定义多个动画，并与duration、timing-function等属性按顺序一一对应，可实现多动画叠加；推荐使用animation简写语法确保参数匹配，避免错位，提升可读性。
在CSS中，如果想让多个动画同时作用于同一个元素，可以通过 animation-name 指定多个动画名称，用逗号分隔。浏览器会自动将这些动画叠加应用到元素上。关键在于如何通过配套的 animation 属性精确控制每个动画的行为。
1. 多个动画的定义与声明
使用逗号分隔的方式，在 animation-name 中列出多个动画名称，同时为每个动画提供对应的持续时间、延迟、缓动函数等参数，顺序一一对应。
示例：
.element {
animation-name: fadeIn, slideIn, rotate;
animation-duration: 2s, 1.5s, 1s;
animation-timing-function: ease-out, ease-in, linear;
animation-delay: 0s, 0.5s, 0s;
animation-iteration-count: 1, 1, infinite;
}
上面代码中：
- fadeIn 持续2秒，无延迟，执行1次
- slideIn 持续1.5秒，延迟0.5秒，执行1次
- rotate 持续1秒，无延迟，无限循环
2. 动画属性的顺序匹配规则
CSS 动画属性是按顺序与 animation-name 中的名称一一对应的。如果数量不匹配，浏览器会重复或截断较短的列表以对齐。
立即学习“前端免费学习笔记（深入）”；
例如：有3个动画名，但只写了2个 duration，那么第三个动画会使用第二个 duration 的值（循环补全）。
建议始终保持每个 animation 子属性的数量和顺序一致，避免意外行为。
3. 使用 animation 简写属性更清晰
推荐使用简写的 animation 属性，把每个动画的全部参数写在一起，提升可读性并减少错位风险。
.element {
animation:
fadeIn 2s ease-out,
slideIn 1.5s ease-in 0.5s,
rotate 1s linear infinite;
}
这种方式更直观，每个动画独立一行，参数明确，不易出错。
4. 控制动画叠加的关键点
多个动画可以同时修改同一属性（如 transform 或 opacity），但最终效果是叠加计算的。
- 若两个动画都设置了 transform，比如一个平移、一个旋转，它们会合并生效（相当于 transform: translate() rotate()）
- 但要注意：后定义的动画不会覆盖前一个，而是由浏览器合成最终的 transform 值
- 如果动画之间存在冲突（如同时改变 opacity 从0到1 和 从1到0），实际表现取决于时间轴和权重，需仔细调试
基本上就这些。只要理清命名顺序、参数对应关系，并善用简写语法，多个动画可以精准协同工作。不复杂但容易忽略细节。
