最稳定兼容的条纹动态流动方式是background-size配合background-position动画，因其不触发重排、不受transform/flex干扰、iOS Safari无撕裂；关键需严格按25%切分渐变色、设合适background-size（如30px 30px）、显式声明background-repeat: repeat，并依场景选用infinite动画、JS动态更新或CSS变量绑定。
直接用 background-size 配合 background-position 做动画，是实现条纹背景动态流动最稳定、兼容性最好的方式——它不触发重排，不被 transform 或 flex 干扰，iOS Safari 也不撕裂。
为什么 background-size 动画比 width 更稳
很多人想用 width 控制进度条填充长度，但一嵌进真实布局就出问题：
- 父容器用了
transform: scale(0.9)，width值没变，视觉却缩了，条纹错位 - 进度条放在
display: flex容器里，flex-shrink: 1会偷偷压缩它，宽度被截断 - iOS Safari 下高频更新
width，容易触发 layout + paint，动画卡顿甚至撕裂
background-size 是纯绘制层属性，只影响背景怎么“画”，不参与布局计算。改它，不会让浏览器重新算位置、尺寸、流式关系，自然更干净。
条纹背景的渐变写法与尺寸设置
条纹不是靠图片，而是靠重复线性渐变（repeating-linear-gradient）或精确切分的 linear-gradient 实现。关键在比例和单位：
立即学习“前端免费学习笔记（深入）”；
- 方向固定：用
linear-gradient(135deg, ...)，角度决定倾斜度，别用to bottom right这类语义写法，不同浏览器解析可能不一致 - 颜色区间必须严格按 25% 切分，比如
rgba(255,255,255,.15) 25%, transparent 25%，否则拼接处有缝 -
background-size设成30px 30px或40px 40px；数值越小条纹越密，太大（如100px 100px）就显块状，失去条纹感 - 必须显式写
background-repeat: repeat（虽然默认就是），避免某些 CSS 重置库把它干掉
让条纹真正“动起来”的三种实用方式
不是所有“动”都适合进度场景。要区分加载态 vs 真实进度反馈：
- 加载中无限滚动：用
@keyframes+infinite，比如background-position: 0 0 → -30px 0（对应background-size: 30px 30px），配linear缓动保证匀速 - 响应式进度条（如视频缓冲）：不用 animation，改用 JS 动态设
style.backgroundPosition，比如el.style.backgroundPosition = `${-bufferedPercent}px 0`，再加transition: background-position 0.2s ease-out防跳帧 - 绑定实时 value：CSS 里定义
--progress: 0，背景定位写background-position: calc(var(--progress) * -1px) 0；JS 更新时只调el.style.setProperty('--progress', value)；注意别混用%和px，calc()里单位不统一会失效
容易被忽略的兼容性细节
看似简单的条纹动画，在旧版 Safari 或安卓 WebView 里常因一两个属性缺失直接静止：
- 必须给容器设明确宽高（
height不能是auto），否则background-position百分比基准不确定 - 安卓 4.x WebKit 不支持
repeating-linear-gradient，得降级为linear-gradient+ 手动控制background-size和background-position - 如果用了
will-change: background-position，别滥用——只对高频更新的元素加，否则反而增加内存开销 - 父容器有
overflow: hidden时，确保条纹动画区域完全在裁剪框内，否则边缘可能被意外截断
条纹动得顺不顺，不在动画帧数多不多，而在背景尺寸、位移范围、单位换算这三处是否严丝合缝。少一个 px，多一个 %，都可能让流动变成卡顿或跳变。
