纯CSS实现的Keyframes Animation切换移动方向时无过渡如何修复

算力阿峰

2026-10-6

问题原因

你编写的关键帧规则没有为每个时间节点同时显式定义top和left两个属性的取值，浏览器自动插值计算过渡状态时，两个属性的动画周期会发生重叠，没有按照「先竖直移动、再水平移动」的顺序执行，因此会出现过渡不平滑、圆点走斜线路径的问题。

修复方案

调整@keyframes规则，每个百分比节点同时写全top和left的取值，保证每个动画阶段内只有一个属性发生变化，另一个属性保持固定值即可。另外不需要额外设置transition属性，CSS Animation本身会处理属性的平滑过渡，二者混用反而可能出现预期外的效果。

修复后完整代码

* {
  margin: 0;
  padding: 0;
}

#dot {
  height: 10px;
  width: 10px;
  background: #000;
  border-radius: 100%;
  position: absolute;
  animation: moveDotOne 2s infinite;
  top: 0;
  left: 0;
}

@keyframes moveDotOne {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 20px;
    left: 0;
  }
  50% {
    top: 20px;
    left: 20px;
  }
  75% {
    top: 0;
    left: 20px;
  }
  100% {
    top: 0;
    left: 0;
  }
}