Как избежать разрыва между различными шагами анимации ключевого кадра?

Question

Я бы хотел, чтобы моя анимация не останавливалась на 50%, как избежать этого короткого iterruption?

@-webkit-keyframes PLAY { 
    0% { 
     -webkit-transform: translate(0px,0); 
    } 
    50% { 
     -webkit-transform: translate(-60px,0) rotate(-1080deg) scale(2); 
    } 
    100% { 
     -webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1); 
    } 
} 

.play { 
    -webkit-animation-name: PLAY; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-timing-function: ease-out; 
} 

Answer 1

Я думаю, что сейчас он использует легкость в использовании или что-то подобное для своей «функции синхронизации».

Попробуйте добавить это свойство CSS:

-webkit-animation-timing-function: linear; 

2ND EDIT: Итак, теперь, когда я вижу ваше объявление класса, кажется, ослабление является намеренным. Так как это относится к каждой фазе анимации, ее нужно применять несколько иначе. Вот мое полное изменение - вы можете также удалить функцию синхронизации внутри класса:

@-webkit-keyframes PLAY { 
    0% { 
     -webkit-transform: translate(0px,0); 
     -webkit-animation-timing-function: ease-in; 
    } 
    50% { 
     -webkit-transform: rotate(-1080deg) scale(2); 
     -webkit-animation-timing-function: ease-out; 
    } 
    100% { 
     -webkit-transform: rotate(-2060deg) scale(1); 
    } 
} 

1ST EDIT: На самом деле, налюбовавшись своей «Между тем, в Batcave ...!» Анимации в моем тесте на минуту, я думаю, что есть немного больше, чтобы улучшить. Я предполагаю, что перевод предназначен для смещения внецентрового вращения, вызванного положением «центральной точки» по умолчанию. Таким образом, вы можете добавить это свойство CSS и удалить переводы. Тогда это даже не зависит от размера изображения.

transform-origin: 50% 50%; 
-moz-transform-origin: 50% 50%; 
-webkit-transform-origin: 50% 50%; 
-o-transform-origin: 50% 50%; 
-ms-transform-origin: 50% 50%; 

В самом деле, 0% может быть просто "-webkit-преобразование не: нет"

Изменено использовать правильный кроссбраузерный CSS свойство