CSS动画运行时scroll-snap滚动吸附不丝滑、瞬间跳转该如何解决？

你的CSS动画修改的是left属性，该属性属于*触发布局重排（回流）*的属性：每帧动画执行时，浏览器都需要重新计算整个页面的元素位置和布局尺寸。而scroll-snap的平滑滚动逻辑依赖浏览器对滚动容器布局状态的稳定判定，布局频繁刷新时，浏览器会跳过平滑滚动的过渡计算，直接触发吸附定位，表现为瞬间跳转。

• 首选方案：将动画从修改left改为修改transform的translateX属性。transform属于仅触发合成层渲染的属性，不会触发页面重排重绘，完全不会干扰滚动吸附的布局计算，动画效果和原实现完全一致。
  修改后的动画代码如下：

@keyframes section2decorbox {
    0% {transform: translateX(-100%);}
    10% {transform: translateX(-100%);}
    30% {transform: translateX(0);}
    70% {transform: translateX(0);}
    90% {transform: translateX(100%);}
    100% {transform: translateX(100%);}
}

@keyframes section2decorbox2 {
    0% {transform: translateX(100%);}
    10% {transform: translateX(100%);}
    30% {transform: translateX(0);}
    70% {transform: translateX(0);}
    90% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}

修改后可以同步删除装饰元素CSS里的left相关默认配置即可。

• 补充优化：给动画元素添加will-change: transform属性，提前告知浏览器该元素会做变换动画，分配独立合成层处理，进一步降低动画和滚动逻辑的互相干扰。
• 兜底方案：如果特殊场景必须保留left属性动画，可以给滚动容器（此处为html标签）添加will-change: scroll-position属性，提示浏览器优先保障滚动相关相关相关计算，降低动画重排对滚动的干扰，该方案效果劣于修改为transform的方案。

内容的提问来源于stack exchange，提问作者Quebeh