纯CSS动态条纹进度效果关键在于background-size与background-position配合线性渐变实现条纹流动，避免width动画引发的transform错位、flex压缩及iOS Safari重绘撕裂；background-size属绘制层属性，不触发layout，更稳定。
纯 CSS 实现动态条纹进度效果，关键不是靠 width 动画推移填充块，而是用 background-size 和 background-position 配合线性渐变，让条纹“流动”起来——既避免布局干扰，又兼容 flex / transform 容器，iOS Safari 也不撕裂。
为什么 background-size 动画比 width 更稳
直接改 width 在以下场景会出问题：
• 父容器用了 transform: scale()，进度条视觉错位
• 进度条嵌在 flex 布局里，flex-shrink 导致宽度被压缩截断
• iOS Safari 下频繁更新 width 触发重绘撕裂，动画卡顿
而 background-size 是绘制层属性，不参与 layout 计算，不受父级缩放、flex、position 影响，动画更干净
条纹背景的渐变写法与尺寸设置
条纹本质是重复渐变图案，必须控制好单位和比例：
• 渐变方向固定为 linear-gradient(135deg, ...)，角度决定条纹倾斜度
• 每段颜色区间严格按 25% 切分（如 rgba(255,255,255,.15) 25%, transparent 25%），保证无缝拼接
• background-size 设为 30px 30px 或 40px 40px，数值越小条纹越密，太大则显块状
• 必须加 background-repeat: repeat（默认就是），否则只显示单个单元格
如何让条纹真正“动起来”
仅靠 @keyframes 移动 background-position 不够顺滑，JS 动态更新时容易跳帧：
• 给进度条元素加 transition: background-position 0.3s ease-out
• JS 更新时只改 style.backgroundPosition，比如 element.style.backgroundPosition = '-20px 0'
• 不要用 animation + infinite 做持续滚动，那适合加载中状态；真实进度条应响应 value 变化
• 若需从 0% 开始流动，初始设 background-position: 0 0，终点设 background-position: -30px 0（对应 background-size: 30px 30px）
立即学习“前端免费学习笔记（深入）”；
适配动态进度值的 calc() 写法
硬编码动画只能做固定进度，实际项目要绑定 JS 的实时 value：
• 定义 CSS 自定义属性：--progress: 0;
• 背景定位用 calc：background-position: calc(var(--progress) * -1px) 0;（假设每 1% 对应 1px 左移）
• JS 更新：el.style.setProperty('--progress', bufferedPercent);
• 注意：不要用 % 单位直接乘，calc 里混合单位会失效，统一转成 px 或 rem 更可控
• iOS Safari 对 calc 支持良好（≥ iOS 14），无需降级
最易被忽略的是 background-position 的初始偏移方向——必须为负值左移，且数值要和 background-size 匹配，否则条纹“滑不动”或“闪一下就停”。动效是否自然，80% 取决于这个差值是否对齐。
