левый и верхний свойства не анимированы
В анимации ниже преобразование анимировано правильно, но свойства left и top - нет. Почему это?
.element-animation {
background-color: yellow;
width: 30px;
height: 30px;
animation: animationFrames ease 2s;
animation-iteration-count: infinite;
}
@keyframes animationFrames {
0% {
left: 0px;
top: 0px;
opacity: 1;
transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
25% {
left: 0px;
top: -90px;
}
75% {
left: 200px;
top: -90px;
}
100% {
left: 200px;
top: 0px;
opacity: 1;
transform: rotate(0deg) scaleX(2) scaleY(2) skewX(45deg) skewY(45deg);
}
}
<div class="element-animation"></div>