本文详解如何在单个HTML元素上正确组合多个CSS动画（如弹跳+平移），解决因transform属性冲突导致后定义动画覆盖前动画的问题，并提供兼容性良好、无需额外DOM节点的纯CSS解决方案。
本文详解如何在单个html元素上正确组合多个css动画（如弹跳+平移），解决因`transform`属性冲突导致后定义动画覆盖前动画的问题，并提供兼容性良好、无需额外dom节点的纯css解决方案。
在CSS中，同一个元素无法对同一CSS属性（尤其是transform）定义两个独立动画——因为后声明的transform会完全覆盖前一个，导致看似“只播放一个动画”。你原始代码中同时使用animation: bounce ...和animation: translation ...，实际是后者覆盖了前者；而尝试用逗号分隔多动画时，又因bounce和translation都依赖transform，浏览器无法合并计算，最终仅渲染最后一次transform值（即平移结果），弹跳效果消失。
✅ 正确做法是：将两个动画作用于不同CSS属性，从而实现真正并行执行。推荐方案是：
- 弹跳动画继续使用 transform: translateY()（保持物理感与性能）
- 水平移动动画改用 left（配合 position: absolute）或 margin-left，避开transform冲突
以下是优化后的完整可运行代码：
* {
padding: 0;
margin: 0;
}
.ground {
position: relative; /* 为绝对定位的.ball提供定位上下文 */
display: flex;
height: 500px;
width: 700px;
background-color: darkkhaki;
margin: auto;
margin-top: 70px;
}
.ball {
position: absolute; /* 关键：启用left定位 */
bottom: 0; /* 替代align-self: flex-end，确保贴底 */
height: 50px;
width: 50px;
background-color: brown;
border-radius: 50%;
/* 同时启用两个动画：逗号分隔，属性一一对应 */
animation:
bounce 1s cubic-bezier(0, 0, 0, 0.95) 0s infinite alternate,
translation 5s ease-out 0s 1 normal forwards;
}
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-400px); }
}
@keyframes translation {
0% { left: 0; }
100% { left: 650px; }
}
<div class="ground"> <div class="ball"></div> </div>
? 关键要点说明：
- ✅ position: absolute + left 实现水平位移，与 transform: translateY() 完全解耦，无属性冲突；
- ✅ animation 属性支持多动画语法：animation: name1 dur1... , name2 dur2...，各参数按顺序严格对应；
- ✅ .ground 添加 position: relative，确保 .ball 的 left 值相对其定位；
- ⚠️ 注意 animation-delay 设为 0s（而非 1s），避免两个动画错开启动；若需延迟，统一设为相同值；
- ? 避免重复声明 animation（如两次 animation: ...），这会导致后者完全覆盖前者。
? 进阶提示：若追求更高性能或更复杂轨迹（如抛物线运动），可考虑使用单个 transform 动画，通过 calc() 或 CSS 自定义属性动态组合 translateX() 和 translateY()，但需借助 JavaScript 控制关键帧——而本方案纯CSS、零JS、结构简洁，适合绝大多数交互动画场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
