CSS 关键帧 : multiple frames smooth transitions

Question

我有以下关键帧，问题是动画不流畅，它停在 50%，然后转到 100%。有什么方法可以使多个框架表现得像一个框架吗？

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

  50% {
    top: 2px;
  }

  100% {
    top: 0;
  }
}

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

编辑:最终目标是让球通过这个: https://d.pr/FREE/CPxkRR , 从右到左，中间没有停(关键帧上的 50%)...谢谢。

Answer 1

我认为(不确定 100%)这是一个计算问题。您可能会注意到您使用的值非常接近(-4px、0px、2px)。所以你在 0% 和 50% 之间有 4px 的差异，在 50% 和 100% 之间只有 2px。我不知道浏览器的准确预测是什么，但由于一些舍入，你将在 50% 左右有类似的值，这会产生 stops 的这种效果。

假设计算值如下:

-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 ...

因此相同的值将被重复使用多次，从而产生这种效果。

这里是同一个例子，持续时间的值很大，我们可以清楚地看到这一点

.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;
  }
}

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