如何使用css动画将div移动到水平然后垂直？

我想使用css动画将div移动到水平然后垂直，如下图所示。 黑色箭头线表示我想要移动绿色框的方式。 但是水平移动后的盒子对角移动，如蓝色箭头所示，而不是垂直向下箭头显示垂直移动。

.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); } } 

这是plunker链接

Answer 1

因为你没有为x变换指定100%终点，所以它在设置为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); } } 

  
 
 Move