Переход сглаживания между анимацией 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

Вы пробовали функцию анимации-времени: linear ;? или просто оставить его как стандартную легкость?