纯CSS实现滑动图片动画卡顿不流畅问题排查

卡顿核心原因 #

你的动画出现拖拽感、掉帧断裂，本质是三个写法问题：

• 动画属性选择错误：当前用left、right定位属性做动画，这类属性变化会触发浏览器全量重排（重新计算整个页面布局）、重绘，每帧动画的性能开销极高，根本跑不满60fps，必然卡顿。
• ID选择器重复使用：同一个页面内#slide、#slide2都被用了两次，而ID是全局唯一标识，重复使用会导致样式匹配、动画执行逻辑异常。
• 动画关键帧冲突：左右两个方向滑动的元素复用了同一个关键帧，关键帧同时修改left和right值，和元素初始设置的单侧定位（一个初始right:-100%、一个初始left:-100%）冲突，动画过程中属性计算混乱，出现跳帧。

纯CSS完全可以实现丝滑的滑动效果，按下面的方案修改即可。

修复步骤 #

1. 替换为GPU加速的动画属性 #

彻底弃用left/right/margin这类会触发重排的属性做位移动画，改用transform: translateX()实现位移。transform属性会交给GPU单独合成处理，动画过程不会触发重排重绘，性能开销极低，可以稳定跑满60fps。

2. 替换重复ID为类选择器 #

把所有重复的ID选择器改成类选择器，避免样式匹配异常。

3. 拆分双向动画的关键帧 #

给左滑、右滑元素分别写对应的动画逻辑，不要混用同一个关键帧，避免属性冲突。

最终可复用代码 #

CSS部分 #

/* 公共滑动元素配置 */
.slide-left,
.slide-right {
    position: relative;
    will-change: transform; /* 提前告知浏览器该元素会有transform变化，优化渲染性能 */
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

/* 右滑入场初始状态：从容器右侧外进入 */
.slide-right {
    transform: translateX(100%);
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

/* 左滑入场初始状态：从容器左侧外进入 */
.slide-left {
    transform: translateX(-100%);
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

/* 右滑关键帧 */
@-webkit-keyframes slideInRight {
    to { transform: translateX(0); }
}
@keyframes slideInRight {
    to { transform: translateX(0); }
}

/* 左滑关键帧 */
@-webkit-keyframes slideInLeft {
    to { transform: translateX(0); }
}
@keyframes slideInLeft {
    to { transform: translateX(0); }
}

/* 可选优化：自定义缓动函数让动画更自然，替换默认的linear/ease即可 */
.slide-left, .slide-right {
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

HTML部分修改 #

把原来所有加了id="slide"的元素，替换为class="slide-right"；所有加了id="slide2"的元素，替换为class="slide-left"即可。
你原来写的.wrapper { overflow: hidden; }逻辑是正确的，可以保留，避免滑动过程中出现横向滚动条。

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