css动画之间的平滑过渡

Question

是否可以防止小的延迟？在css动画结束时？

我试图让4个球不断地相互旋转。他们旋转很好，但在每个360度周期结束时，有一个非常短暂但明显的停顿。 我知道＆＃39;动画填充模式：转发＆＃39;应该让动画记住它的'＃最终状态，但似乎无法解决问题。

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

@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

你有没有试过动画计时功能：线性;？或者只是将其作为默认的缓解？

Answer 2

尝试将animation-timing-function的值更改为linear。您目前正在使用ease-in和ease-out，这会在开头或结尾处改变动画的速度。 linear将始终使用相同的速度。

更新了CodePen。

Here's some info了解各种计时功能在不同时间的图表上的样子。