demo
为什么这个动画一直在抖动?
这个动画抖动的原因可能是由于几个因素导致的,但根据提供的 CodePen 示例 来看,主要问题很可能是由于 CSS 动画的 transform
属性与浏览器的重绘(repaint)和回流(reflow)过程之间的冲突。具体来说,以下几点可能是导致抖动的原因:
animation-duration
和/或 animation-iteration-count
设置为 infinite
),且每次更新都触发了浏览器的重绘或回流,那么这可能会导致性能问题,进而产生抖动。transform
属性的使用:虽然 transform
通常是 GPU 加速的,但在某些情况下,如果它与其他可能触发重绘的属性(如 width
、height
、margin
等)一起使用时,可能会导致性能问题。在你的示例中,虽然 transform
是主要的动画属性,但检查是否有其他 CSS 属性在动画过程中被修改也很重要。解决方案:
animation-duration
,或尝试使用 requestAnimationFrame
而不是 CSS 动画来控制动画的帧率。针对你提供的具体示例,由于动画较为简单且主要依赖于 transform
,问题可能不在于 transform
本身,而是可能与动画的持续时间、迭代次数或与其他 CSS 属性的交互有关。建议从调整这些参数开始,看看是否能解决问题。
我赞同@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);
}
8 回答5.5k 阅读✓ 已解决
9 回答8.8k 阅读
6 回答4.3k 阅读✓ 已解决
5 回答7.9k 阅读✓ 已解决
6 回答2.9k 阅读
5 回答7.6k 阅读
3 回答10k 阅读✓ 已解决
因为动画生效的时候,元素移动导致 hover 状态没了,left 变成 0,元素往回移动了,移动到鼠标位置,动画又生效了。所以就抖动了