Javascript动画在快速运行时会发生扭曲

我刚刚创建了一个简单的动画函数，可以从左向右移动一个长方体。问题是，当动画运行时，长方体在动画中变为矩形，因此长方体形状的比例消失，这不是我想要的，如何通过动画保留长方体的形状。当您将动画速度降低到2秒时，长方体将保留其形状，但当您加快动画速度时，长方体将变得倾斜。如何防止这种情况发生

函数动画（…args）{
让starttime=newdate（）.getTime（）；
让请求ID；
如果（args.length==5）{
args={el:args[0]，props:args[1]，duration:args[2]，step:args[3]，callback:args[4]}；
}否则{
args={el:args[0]，props:args[1]，duration:args[2]，callback:args[3]}；
}  
函数moveit（args）{
var timestamp=new Date（）.getTime（）；
var runtime=timestamp-starttime；
var progress=runtime/args.duration；
进度=数学最小值（进度，1）；
用于（参数道具中的常量道具）{
设dist=parseInt（args.props[prop].substring（0，args.props[prop].length-2），10）；
参数el.style[prop]=（dist*progress）.toFixed（2）+“px”；
}
如果（args.step！=未定义）{
参数步骤（进度）；
}
if（运行时
.box{
背景：红色；
宽度：50px；
高度：50px；
位置：相对位置；
排名：0；
左：0；
}
.控制{
位置：相对位置；
顶部：20px；
}

重置
玩
在我的电脑（+Firefox）上，我一点也看不到它有歪斜，即使我将时间设置为0.1秒，它的渲染效果也非常好。我有一张像样的显卡，还有一个i7-6核，如果这有关系的话。@Pac0谢谢你让我知道，可能是因为我的笔记本电脑有一张糟糕的显卡。是的，这可能与客户机的功能有关。我不确定你在这里能做什么。也许尝试使用css动画？幸运的是，它们比人们编写的一些自定义javascript代码优化得更好？检查此处的实例：。有一种称为“运动模糊”的方法与你的类似（一种左右移动的正方形）。