css - css 动画之间的平滑过渡

Question

是否可以防止 css 动画结束时的小“滞后”？

我试图让 4 个球不断地相互旋转。它们旋转得很好，但在每个 360 度循环结束时，会有一个非常短但明显的停顿。我知道“animation-fill-mode: forwards”应该让动画记住它的“最终状态”，但这似乎并不能解决问题。

也许有比我使用的方法更好的方法来设置旋转？这使得每个动画迭代之间的过渡更加平滑......

@keyframes container-rotate {
to {transform: rotate(360deg); }
}

animation-name: container-rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-fill-mode: forwards;

这里的例子: http://codepen.io/Recidvst/pen/wGbjvz

谢谢!

Answer 1

尝试将 animation-timing-function 的值更改为 linear。您当前正在使用 ease-in 和 ease-out，它们会改变动画开始或结束时的速度。 linear 将始终使用相同的速度。

已更新 CodePen .

Here's some info关于不同时间函数在时间图表上的样子。