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

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

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

我赞同 @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); }

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

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

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

解决方案：

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

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

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

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

前端有没有办法实现页面截图？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？