前端 - 为什么这个动画一直在抖动?

Question

demo
为什么这个动画一直在抖动?

Answer 1

我赞同@kakao 的说法。一种解决方法是用transform属性来替代left属性避免触发重新布局

.sample {
  transform: translateX(0);
  background: red;
  position: absolute;
  left: 0px;
  width: 100px;
  height: 100px;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease
}
.sample:hover {
  transform: translateX(420px);
}

Answer 2

悬停后向右移动，但是在移动的某个时刻鼠标没有悬停在元素内了，然后元素要移动回到原状态，移动回到原状态的过程中鼠标又悬停在元素内了

Answer 3

因为动画生效的时候，元素移动导致 hover 状态没了，left 变成 0，元素往回移动了，移动到鼠标位置，动画又生效了。所以就抖动了

Answer 4

这个动画抖动的原因可能是由于几个因素导致的，但根据提供的 CodePen 示例 来看，主要问题很可能是由于 CSS 动画的 transform 属性与浏览器的重绘（repaint）和回流（reflow）过程之间的冲突。具体来说，以下几点可能是导致抖动的原因：

1. 高频率的动画更新：如果动画的更新频率过高（例如，使用了非常短的 animation-duration 和/或 animation-iteration-count 设置为 infinite），且每次更新都触发了浏览器的重绘或回流，那么这可能会导致性能问题，进而产生抖动。
2. transform 属性的使用：虽然 transform 通常是 GPU 加速的，但在某些情况下，如果它与其他可能触发重绘的属性（如 width、height、margin 等）一起使用时，可能会导致性能问题。在你的示例中，虽然 transform 是主要的动画属性，但检查是否有其他 CSS 属性在动画过程中被修改也很重要。
3. 浏览器兼容性：不同的浏览器对 CSS 动画的处理可能有所不同，这可能导致在某些浏览器中动画表现正常，而在其他浏览器中则出现抖动。
4. 硬件加速限制：尽管现代浏览器普遍支持硬件加速，但仍然存在一些限制。如果动画过于复杂或超出了硬件加速的处理能力，就可能出现性能问题。

解决方案：

• 优化动画频率：减少动画的更新频率，例如增加 animation-duration，或尝试使用 requestAnimationFrame 而不是 CSS 动画来控制动画的帧率。
• 避免不必要的重绘和回流：确保在动画过程中不修改可能触发重绘或回流的 CSS 属性。
• 检查浏览器兼容性：在不同的浏览器中测试动画，以确定是否存在特定的浏览器问题。
• 简化动画：如果可能，尝试简化动画的复杂度，以减少对硬件加速的依赖。

针对你提供的具体示例，由于动画较为简单且主要依赖于 transform，问题可能不在于 transform 本身，而是可能与动画的持续时间、迭代次数或与其他 CSS 属性的交互有关。建议从调整这些参数开始，看看是否能解决问题。