css动画之间的平滑过渡

Question

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

我想让4个球不断旋转。它们旋转得很好，但在每个360度循环结束时，有一个非常短暂但明显的停顿。 我知道'动画填充模式：转发'应该让动画记住它的'最终状态，但这似乎不能解决问题。

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

@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不同时间函数在不同时间的图上看起来如何。

Answer 2

您是否尝试过animation-timing-function：linear;？或者只是把它作为默认的缓解？