CSS关键帧动画实现弹跳移动小球旋转异常求助

问题出在多个动画同时修改transform属性导致的冲突：bounce动画里用了transform: translateY()，而rotar动画用了transform: rotate()，CSS中同一个元素的多个动画如果都修改transform，后执行的会覆盖前面的，导致弹跳和旋转的变换无法同时生效，运动逻辑混乱。

解决方案：用嵌套元素拆分不同的transform动画 #

把移动+弹跳的逻辑放在外层容器，旋转逻辑放在内部小球元素上，避免transform属性的覆盖冲突。

修改后的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Ball</title>
    <link rel="stylesheet" type="text/css" href="style17.css">
</head>
<body>
    <div class="ball-container">
        <img class="ball" src="pelota.png">
    </div>
    <div class="shadow"></div>
</body>
</html>

修改后的CSS代码：

/* 外层容器：负责移动和弹跳 */
.ball-container{
    height: 50px;
    width: 50px;
    top: 0%;
    position: absolute;
    animation: mover 3s linear infinite alternate, 
              bounce 1s ease-out infinite;
}

/* 内部小球：负责旋转 */
.ball{
    height: 100%;
    width: 100%;
    animation: rotar 1.5s linear infinite;
}

@keyframes mover {
    from {
        left: 0;
    }
    to {
        left: calc(100% - 200px);
    }
}

@keyframes bounce {
    0%,100% {
      transform: translateY(653px);
      height: 30px ;
      width: 55px;
    }
    40%,90%{
      height: 50px;
      width: 50px;
    }
    50% {
      transform: translateY(500px);
      height: 50px;
      width: 50px;
    }
}

.shadow {
    position: absolute;
    width: 50px;
    height: 5px;
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    animation: mover 3s linear infinite alternate, disminuir 1s ease-out infinite;
    bottom: 5px;
}

@keyframes disminuir{
    50%{
      height: 5px;
      transform: scaleX(0.5);
    }
}

@keyframes rotar{
    100%{
      transform: rotate(360deg);
    }
}

原理说明 #

transform是复合属性，同一个元素上的多个动画如果都设置transform，它们的变换不会叠加，而是会互相覆盖。通过嵌套元素，把需要不同transform的动画拆分到不同层级：

• 外层容器处理translateY（弹跳）和left（移动）
• 内部小球处理rotate（旋转）
  这样两个变换逻辑独立生效，动画就不会混乱了。

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