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;？或者只是把它作爲默認的緩解？