Как перемещать div горизонтально, а затем вертикально, используя анимацию css?

Question

Я хочу переместить div, а затем вертикально, используя анимацию css, как показано на следующем рисунке. Черные линии стрелки указывают, как я хочу перемещать зеленую коробку. Но коробка после перемещения по горизонтали движется по диагонали, как показано синей стрелкой, вместо того, чтобы вертикально показывать вертикальную стрелку вниз.

.mybox { 
    width: 100px; 
    height: 100px; 
    background-color: lawngreen; 
} 

.myanimation{ 
    -webkit-animation: simple 3s forwards ease; 
} 

@-webkit-keyframes simple { 
    50% { 
    -webkit-transform: translateX(300px); 
    -moz-transform: translateX(300px); 
    -ms-transform: translateX(300px); 
    -o-transform: translateX(300px); 
    transform: translateX(300px); 
    } 
    100% { 
    -webkit-transform: translateY(300px); 
    -moz-transform: translateY(300px); 
    -ms-transform: translateY(300px); 
    -o-transform: translateY(300px); 
    transform: translateY(300px); 
    } 
} 

Here is the plunker link

Answer 1

Its, потому что вы гавань указан 100% конечная точка для x преобразования, так что возвращаясь после устанавливается на 50%

(function(){ 
 
    var myBox = $(".mybox"); 
 
    $("#movebtn").on("click",function(){ 
 
     myBox.addClass("myanimation"); 
 
    }) 
 
})();

.mybox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: lawngreen; 
 
} 
 

 
.myanimation{ 
 
    -webkit-animation: simple 3s forwards ease; 
 
} 
 

 
@-webkit-keyframes simple { 
 
    50% { 
 
    -webkit-transform: translateX(300px); 
 
    -moz-transform: translateX(300px); 
 
    -ms-transform: translateX(300px); 
 
    -o-transform: translateX(300px); 
 
    transform: translateX(300px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(300px) translateY(300px); 
 
    -moz-transform: translateX(300px) translateY(300px); 
 
    -ms-transform: translateX(300px) translateY(300px); 
 
    -o-transform: translateX(300px) translateY(300px); 
 
    transform: translateX(300px) translateY(300px); 
 
    
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mybox"></div> 
 
    <br> 
 
    <button id="movebtn">Move</button> 
 
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="script.js"></script>