如何使用css动画移动div水平然后垂直？ [英] How to move a div horizontal then vertical using css animation?

问题描述

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

I want to move a div horizontal then vertical using css animation as shown in the following picture. The black arrow lines indicate the way i want move the green box. But box after moving horizontally it moves diagonally as show by the blue arrow instead of moving vertically show by the vertical downward arrow.

.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链接

推荐答案

因为你没有为 x 转换指定 100％结束点，所以它在设置后还原 50％

Its becuase you havent specified a 100% end point for the x transform, so it is reverting after being set at 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>

这篇关于如何使用css动画移动div水平然后垂直？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！