如何实现CSS背景无限平滑左移无卡顿？

嘿，这个问题我做视差背景的时候也踩过坑！你现在用超大像素值的临时方案虽然能跑，但不仅计算麻烦，不同屏幕尺寸下还可能出适配问题。其实有个更简洁高效的方法，核心是利用百分比背景位移实现完全无缝的循环，根本不用依赖超大数值或者小尺寸图片。

核心思路 #

要解决循环跳帧的问题，关键是让动画的起始帧（0%）和结束帧（100%）视觉上完全一致。用百分比设置background-position时，浏览器会自动基于背景图片和容器的尺寸关系计算位移，刚好能让重复的背景完美衔接。

优化后的代码 #

.container:after {
    animation: mist 20s infinite linear; /* 可调整时长控制移动速度 */
    background: url("images/mist.webp") repeat-x top left;
    background-size: auto 100%; /* 保持图片高度铺满容器，宽度按比例自适应 */
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@keyframes mist {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0; /* 用百分比替代固定像素值 */
    }
}

为什么这个方案有效？ #

• 无缝循环：动画走到100%时，背景图片向左移动了自身完整宽度的距离（-100%对应图片自身的宽度比例），此时repeat-x的下一张图片刚好顶上来，和起始帧视觉效果完全一致，不会有任何跳回卡顿。
• 全屏幕适配：百分比值不依赖固定像素，不管是手机小屏幕还是桌面大屏幕，动画都会自动适配，保持平滑移动。
• 性能更优：不用处理超大像素数值，浏览器计算负担更小，动画流畅度更高。

可选调整 #

如果需要背景图片宽度铺满容器（而非保持原始比例），可以把background-size改成100% auto，动画部分的background-position: -100% 0依然有效，同样能实现无缝循环。

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