Question

我有以下关键帧，问题是，动画不流畅，它停在50％，然后转到100％。有没有办法让多个帧表现得像一个？

@keyframes orbit_moveY {
  0% {
    top: -4px;
  }

  50% {
    top: 2px;
  }

  100% {
    top: 0;
  }
}

此外，动画的代码如下： animation: orbit_moveY 2s linear 0s infinite normal。

编辑：最终目标是通过这个： https://d.pr/FREE/CPxkRR，从右到左，不停在中间（关键帧占50％）......谢谢。

Answer 1

我认为（不确定为100％）这是一个计算问题。您可能会注意到您使用了非常接近的值（-4px，0px，2px）。因此，您在0％和50％之间存在 4px 差异，并且只有 2px 介于50％和100％之间。我不知道浏览器的确切含义是什么，但由于某些四舍五入，您将在50％附近获得相似的值，从而产生停止的效果。

假设计算出的值如下：

-4 -3.9 -3.8 -3.7 .....  1.5 1.6 1.7 1.8 1.9 (2) 1.9 1.8 1.7 .... 0.2 0.1 0

经过一些舍入后，你可能会在2的值

附近得到类似的结果

... 1.5 1.6 2 2 2 (2) 2 2 2 1.6 ...

因此，重复使用相同的值并多次使用会产生此效果。

以下是具有较大持续时间值的相同示例，我们可以清楚地看到这一点

＆＃13;

.box {
  height:200px;
  background:red;
  position:relative;
  animation: orbit_moveY 8s 0s infinite;
}


@keyframes orbit_moveY {
  0% {
    top: -4px;
  }

  50% {
    top: 2px;
  }

  100% {
    top: 0;
  }
}

＆＃13;

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

＆＃13;

Answer 2

嗯，您的top:值太低了。也许你应该给它们更大的值，比如100px，从0%开始到100%：

@keyframes orbit_moveY {
  0% {
    top: -4px;
  }
  100% {
    top: 100px;
  }
}

CSS关键帧：多帧平滑过渡

2 个答案: