为什么动画一直在抖动

问题：我创建了一个向鼠标移动的动画，但是动画一直在抖动。这是为什么？

代码片段：

<p>demo<br>为什么这个动画一直在抖动？</p>

答案：

问题的根源在于动画效果的实现。当动画生效时，元素会向鼠标位置移动。然而，在元素移动的过程中，它会脱离鼠标的悬浮状态，导致left属性恢复默认值 0，从而使元素向回移动。移动到鼠标位置后，动画再次生效，如此反复，导致动画不断抖动。

解决方法：

要解决此问题，需要在动画持续期间保持元素的悬浮状态。这可以通过在元素上添加以下 css 规则来实现：

pointer-events: none;

此规则可防止元素在动画期间与鼠标交互，从而保持元素的悬浮状态并防止抖动。