The X-axis shift does not work, although I wrote in the code that it should be.

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>

Link to the code: https://jsfiddle.net/deloop_/qsr0gf35/2/

    1 answer 1

    Only the last property from

     transform: translateX(500px); transform: rotate(0deg);

    In this case, it is rotate .

    To apply multiple transformations, they need to be separated by a space:

     transform: translateX(500px) rotate(0deg); 

     .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) rotate(0deg); } 50% { transform: translateX(100px) 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>