Why is animation jittery/choppy at long duration?

问题

When I animate a box just 90px to left and 90px down in 15 seconds using velocity.js, the animation is a bit jittery.

How can I fix this problem, or should I just use another animation library for JS?

$(function() {
  $("#box").velocity({
    top: 90,
    left: 90
  }, {
    duration: 15000,
    easing: 'ease-in-out'
  });
});

#box {
  color: white;
  background-color: black;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.ui.min.js"></script>
<div id="box">box</div>

View on Codepen

回答1:

Thanks to @showdev, replacing left and top with translateX and translateY did the trick.

Code:

$(function() {
  $("#box").velocity({
    translateY: 90,
    translateX: 90
  }, {
    duration: 15000,
    easing: 'ease-in-out'
  });
});

#box {
  color: white;
  background-color: black;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.ui.min.js"></script>
<div id="box">box</div>

View on Codepen

来源：https://stackoverflow.com/questions/35071079/why-is-animation-jittery-choppy-at-long-duration