Javascript动画的行为不符合预期

我想创建一个简单的动画，其中一个矩形的长度在“mouseover”事件发生时平滑地更改为其值的一半，在“mouseout”事件发生时再次加倍。 如果鼠标移动缓慢，下面的代码可以工作，但如果鼠标移动迅速，则无法工作。如果鼠标快速移动，矩形就会卡住。请建议如何克服这个问题

svg=document.getElementById（“svg”）；
var w=600；
var阶跃=10；
addEventListener（“mouseover”，function（）{
函数anim（）{
w-=阶跃；
如果（w>=300）{
myrect=document.getElementById（“myrect”）；
myrect.setAttribute（“宽度”，w）；
请求动画帧（anim）；
}
}
动漫（）；
});
addEventListener（“mouseout”，function（）{
函数anim（）{
w+=阶跃；
如果（w以下代码的简短解释：

动画过程统一在一个函数中，可以根据
方向
参数值在两个方向上工作。鼠标事件只改变动画方向。变量
动画
防止双重调用
请求动画帧
，并使方向变化平滑



svg=document.getElementById（“svg”）；
var w=600；
var阶跃=10；
var方向；
var animActive=false；
addEventListener（“mouseover”，function（）{
方向=真；
如果（！活动）
请求动画帧（anim）；
});
addEventListener（“mouseout”，function（）{
方向=假；
如果（！活动）
请求动画帧（anim）；
});
函数anim（）{
如果（指示）{
如果（w>300）{
animActive=真；
w-=阶跃；
myrect=document.getElementById（“myrect”）；
myrect.setAttribute（“宽度”，w）；
请求动画帧（anim）；
}
其他的
animActive=假；
}
否则{
如果（w<600）{
animActive=真；
w+=阶跃；
myrect=document.getElementById（“myrect”）；
myrect.setAttribute（“宽度”，w）；
请求动画帧（anim）；
}
其他的
animActive=假；
}
}
今天，请不要将JavaScript用于此类动画。
CSS转换就是为了实现这一点而进行的——它们显示了更好的性能，因为大多数浏览器可以在图形卡上更快地计算它们，而不是CPU

有关更多信息，请参阅

因此，您的示例的改进版和缩短版如下所示


#myrect{
转型：转型0.5s轻松；
}
#myrect:悬停{
变换：比例（0.5,1.0）；
}