Как можно сделать движение плавным в css animation(keyframes)?

Question

[davc]

Здравствуйте, у меня есть такая картинка

его нужно вращать сначала медленно, потом быстро, потом опять медленно.
Я это сделал через tansform и поставил transition 8с, и получился не то что хотелось.
Попробовал через animation keyframes-

@keyframes a {
     20%{
     transform: rotate(300deg);
   }
     50%{
     transform: rotate(1500deg);
   }
     100%{
     transform: rotate(2000deg);
   }
}

и возникло у меня такая проблема: кода он с 20% дошел до 50%, остановился потом продолжал, и так и на 100%.
Как можно сделать что по процентам он не остановился а плавно изменил скорость.
всем спасибо

Answer 1

[0xD34F]

нужно вращать сначала медленно, потом быстро, потом опять медленно

Так?

Ну и вообще - вам стоит почитать про временные функции.

Comments

[davc]

Спасибо за ответ, но к сожалению нет. Как поставить 0% и 100% это я знал, мне надо чтобы там было 10% 20% 30% ... и так далее, если добавить там кроме 0% и 100%, например 80%, то когда он дойдет до 80% останавливается, и потом начинает опять вращаться, мне надо сделать так что при вращении он не остановился

[Артем Пономарев]

davc, Приглашал эксперта? Мне самому интересно решение этой задачи)