css动画之间的平滑过渡答案

【问题标题】：Smooth-out transition between css animationscss动画之间的平滑过渡
【发布时间】：2016-05-23 21:34:33
【问题描述】：

是否可以防止 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

谢谢！

【问题讨论】：

标签： css animation rotation

【解决方案1】：

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

更新CodePen。

Here's some info 了解各种计时函数在时间图上的样子。

【讨论】：

完美！非常感谢，这正是我需要的。感谢您的回答背后的努力。

【解决方案2】：

你试过animation-timing-function:linear;吗？还是将其保留为默认缓动？

【讨论】：