【前端教程】如何创建一个循环匀速移动动画，移动距离达到200px？

5 min read

可以尝试使用CSS3的@keyframes和animation属性实现这个动画效果。

HTML代码：

<div class="box"></div>

CSS代码：

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  animation: moveupdown 4s linear infinite;
}

@keyframes moveupdown {
  0% {
    top: 0;
  }
  50% {
    top: -100px;
  }
  100% {
    top: 0;
    transform: translate(0, 200px); /* 向下移动200px */
  }
}

解释一下这段CSS代码的含义：

  • 定义一个红色的小方块，首先在顶部定位（top: 0），然后应用一个名为“moveupdown”的动画，该动画会循环无限次（infinite）。
  • 使用@keyframes定义一个“moveupdown”动画，每个关键帧的时间点可以使用百分比表示。在起始帧（0%），小方块的顶部与页面顶部对齐（top: 0），中间帧（50%）时小方块向上移动100px（top: -100px），然后再返回原点（top: 0），同时向下移动200px（使用transform的translate属性实现）。

这样，整个动画就达到了题目描述的效果，即向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环。