Почему анимация дрожащая/прерывистая на длительный срок?

Question

Когда я аниматирую коробку с 90px влево и 90px вниз за 15 секунд, используя speed.js, анимация немного нервна.

Как исправить эту проблему, или я должен использовать другую анимационную библиотеку для 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

Answer 1

Благодаря @showdev, заменив левую и верхнюю с translateX и translateY сделал трюк.

Код:

$(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