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

debugcn 发表于 Dev

我的

我想使用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);
  }
}

这是塞子链接

SW4

因为您尚未指定转换的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="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="script.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。