为什么动画会长时间抖动/波涛汹涌？

当我使用velocity.js在15秒内向左侧90px和90px向下动画时，动画有点紧张。

我该如何解决这个问题，还是应该为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; } 

    
box 

在Codepen上查看

Answer 1

感谢@showdev，用translateX替换left和top，而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; } 

    
box