CODEWITHSUNDEEP
jquerycss
manas
manas

Reputation: 6400

How to move a div horizontal then vertical using css animation?

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.

enter image description here

.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

Upvotes: 1

Views: 4883

Answers (1)

SW4
SW4

Reputation: 71170

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="[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>

Upvotes: 2

Related Questions