CSS弹跳与平移动画无法同时播放的问题求助

你遇到的核心问题是两个动画都修改了transform属性，CSS中同一元素的多个动画如果操作同一个属性，后执行的动画会覆盖前一个的属性值，所以只有平移动画生效。下面提供两种可行的解决方案：

方案1：合并动画到同一个关键帧 #

把弹跳和平移的变换逻辑合并到同一个@keyframes里，同时控制translateX和translateY，实现同步运动：

基础版（绑定弹跳与平移时长） #

修改后的.ball样式和关键帧：

.ball {
  align-self: flex-end;
  height: 50px;
  width: 50px;
  background-color: brown;
  border-radius: 50%;
  animation: bounce-translate 5s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
  -webkit-animation: bounce-translate 5s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
}

@keyframes bounce-translate {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(650px, -400px);
  }
}

@-webkit-keyframes bounce-translate {
  from {
    -webkit-transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(650px, -400px);
  }
}

进阶版（独立弹跳频率） #

如果想要让小球每秒弹跳一次、同时5秒完成平移，可以用百分比关键帧细化动画过程：

@keyframes bounce-translate {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(130px, -400px);
  }
  40% {
    transform: translate(260px, 0px);
  }
  60% {
    transform: translate(390px, -400px);
  }
  80% {
    transform: translate(520px, 0px);
  }
  100% {
    transform: translate(650px, -400px);
  }
}

@-webkit-keyframes bounce-translate {
  0% {
    -webkit-transform: translate(0px, 0px);
  }
  20% {
    -webkit-transform: translate(130px, -400px);
  }
  40% {
    -webkit-transform: translate(260px, 0px);
  }
  60% {
    -webkit-transform: translate(390px, -400px);
  }
  80% {
    -webkit-transform: translate(520px, 0px);
  }
  100% {
    -webkit-transform: translate(650px, -400px);
  }
}

方案2：使用嵌套元素分离动画 #

用外层元素负责平移动画，内层元素负责弹跳动画，两个transform分别作用在不同元素上，避免属性覆盖：

修改后的HTML #

<div class="ground">
  <div class="ball-container">
    <div class="ball"></div>
  </div>
</div>

修改后的CSS #

* {
  padding: 0;
  margin: 0;
}

.ground {
  display: flex;
  height: 500px;
  width: 700px;
  background-color: darkkhaki;
  margin: auto;
  margin-top: 70px;
}

.ball-container {
  align-self: flex-end;
  /* 外层执行平移动画 */
  animation: translation 5s ease-out 1s 1 normal forwards;
  -webkit-animation: translation 5s ease-out 1s 1 normal forwards;
}

.ball {
  height: 50px;
  width: 50px;
  background-color: brown;
  border-radius: 50%;
  /* 内层执行弹跳动画 */
  animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
  -webkit-animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-400px);
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-400px);
  }
}

@keyframes translation {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(650px);
  }
}

@-webkit-keyframes translation {
  from {
    -webkit-transform: translateX(0px);
  }
  to {
    -webkit-transform: translateX(650px);
  }
}

这种方式的优势是两个动画完全独立，可分别调整弹跳频率、平移时长等参数，灵活性更高。

内容的提问来源于stack exchange，提问作者Aman_the_wack