Почему анимация работает не так, как я написал?
Суть анимации: Красный блок уходит влево на 140px, после он поворачивается на 720 градусов. А в итоге получается то, что он просто 2 раза уходит влево.
Код:
.d {
display: inline-block;
width: 40px;
height: 40px;
background-color: #F44336;
}
#container {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
@keyframes transformRed {
0% {
transform: translateX(0) rotate(0deg);
}
70% {
transform: translateX(0) rotate(0deg);
}
80% {
transform: translateX(-140px);
}
85% {
transform: rotate(720deg);
}
100% {
transform: translateX(-140px) rotate(720deg);
}
}
#red {
animation: transformRed 2.5s ease-out 0s 1 normal;
}
<div id = "container">
<div id = "red" class = "d"></div>
</div>
Код на jsfiddle: https://jsfiddle.net/deloop_/t6wg275j/1/