Не работает сдвиг по оси X, хотя в коде я написал, что он должен быть.
HTML:
<div id = "container">
<div id = "logo" class = "d"></div>
</div>
CSS:
.d {
display: inline-block;
width: 40px;
height: 40px;
background-color: #F44336;
}
#container {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
@keyframes rotate {
0% {
transform: translateX(0px);
transform: rotate(0deg);
}
50% {
transform: translateX(500px);
transform: rotate(0deg);
}
100% {
transform: rotate(1240deg);
}
}
#logo {
animation: rotate 2.5s ease-out 0s 1 normal;
}
.d {
display: inline-block;
width: 40px;
height: 40px;
background-color: #F44336;
}
#container {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
@keyframes rotate {
0% {
transform: translateX(0px);
transform: rotate(0deg);
}
50% {
transform: translateX(500px);
transform: rotate(0deg);
}
100% {
transform: rotate(1240deg);
}
}
#logo {
animation: rotate 2.5s ease-out 0s 1 normal;
}
<div id="container">
<div id="logo" class="d"></div>
</div>
Ссылка на код: https://jsfiddle.net/deloop_/qsr0gf35/2/