本文详解如何在 CSS 中正确组合多个动画（如垂直弹跳与水平平移），解决因 transform 属性冲突导致的动画覆盖问题，并提供可直接运行的完整代码方案。
本文详解如何在 css 中正确组合多个动画（如垂直弹跳与水平平移），解决因 `transform` 属性冲突导致的动画覆盖问题，并提供可直接运行的完整代码方案。
在 CSS 动画开发中，一个常见误区是试图通过多次声明 animation 简写属性（如连续写两行 animation: bounce ...; animation: translation ...;）来叠加动画——这会导致后声明的动画完全覆盖前一个，因为 animation 是简写属性，重复声明会重置整个动画栈。
更关键的技术限制在于：CSS 不允许对同一属性（如 transform）在多个 @keyframes 中分别定义并同时生效。你原来的 bounce 和 translation 都依赖 transform（translateY 和 translateX），而浏览器只会应用最后解析的 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>
? 注意事项与进阶提示：
- .ground 必须设为 position: relative，否则 position: absolute 的球会相对于视口定位，脱离容器范围；
- bottom: 0 比 align-self: flex-end 更可靠，因 absolute 元素已脱离 Flex 布局流；
- 动画延迟统一设为 0s（原代码中 bounce 延迟 1s 会导致初始静止，影响连贯性），若需同步起始，所有 animation-delay 应一致；
- 如需更高性能或更复杂轨迹（如抛物线），推荐改用单个 transform 动画，通过 cubic-bezier() 或 @keyframes 中组合 translateX() 与 translateY() —— 但必须在一个 @keyframes 中定义，例如：
@keyframes bounceAndMove { 0% { transform: translate(0, 0); } 25% { transform: translate(162.5px, -200px); } 50% { transform: translate(325px, 0); } 75% { transform: translate(487.5px, -200px); } 100% { transform: translate(650px, 0); } }
此方案兼顾兼容性、可维护性与视觉真实感，是实现“边弹跳边滚动”效果的推荐实践。
