CSS实现元素从左到右动画失败，请求代码问题排查

你的代码里有两个关键问题导致小球动画不生效或不符合预期：

• 动画属性被错误覆盖：
  你先单独设置了animation-name: moveBall;和animation-duration: 5s;，但后面的animation: alternate;是动画的简写属性，这会直接覆盖之前设置的动画名称和时长，导致浏览器不知道要执行哪个动画、执行多久，自然不会有移动效果。

  正确的做法是把alternate作为动画方向属性来设置，要么用单独的属性声明，要么把所有动画属性整合到简写里：

  /* 方式1：分开设置 */
  animation-name: moveBall;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite; /* 可选，让动画循环播放 */
  
  /* 方式2：简写形式 */
  animation: moveBall 5s alternate infinite;
  

• left: 100%导致元素移出视口：
  当设置left: 100%时，小球的左边缘会对齐父容器的右边缘，加上小球本身200px的宽度，整个球会完全跑到视口外面，看起来像是没移动。要让小球停在视口内，需要调整终点位置：

  @keyframes moveBall {
      from {
          top: 0;
          left: 0;
      }
      to {
          left: calc(100% - 200px); /* 减去自身宽度，让右边缘对齐视口右边缘 */
          /* 或者用更高效的transform：transform: translateX(calc(100vw - 200px)); */
      }
  }
  

完整修正后的代码 #

.ball {
    border: 5px solid red;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    /* 整合动画属性的简写形式 */
    animation: moveBall 5s alternate infinite;
}

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

<div class="ball"></div>

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