Невозможно использовать Transform: Rotate в анимации по ключевым кадрам [закрыто] ⇐ CSS

[Anonymous]

Итак, вот мой код:

Код: Выделить всё

.wave-animation {
display: inline-block;
animation-name: wave;
animation-duration: 4s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}

@keyframes wave {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(0deg);
}
25% {
transform: rotate(60deg);
}
30% {
transform: rotate(0deg);
}
35% {
transform: rotate(60deg);
}
40% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}

Код: Выделить всё

👋

По мнению полиции СО, этого достаточно, чтобы вы поняли, о чем я пытаюсь сделать. Если нет, попросите разъяснений!
Так вот в чем проблема:
Анимация не работает.
Если я применю преобразование: Rotate(60deg) к классу, рука повернется на 60 градусов. Таким образом, вращение работает.
Если я заменю Transform: Rotate в анимации по ключевым кадрам на Transform: TranslateY, рука будет анимирована. Итак, анимация работает.
Но если совместить то и другое, то получится отметить. Что здесь не так?
Я также пытался использовать CSS Rotate вместо Transform: Rotate, но та же проблема.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -animation