background-position动画通过滚动渐变背景模拟流动感，而非改变宽度；需配合background-size、infinite循环和缓动曲线实现自然加载效果。
background-position 动画为什么能让进度条“动起来”
因为纯色进度条本身没变化，但用渐变背景 + 背景位移动画，就能模拟出“流动感”。关键不是改变宽度，而是让背景图（比如条纹）持续向左或向右滚动，人眼会把它理解成加载在推进。
常见错误是直接对 width 做 CSS 动画——它只能线性增长，没有节奏感，也不像真实加载（比如网络请求那种“卡一下又快进”的错觉）。
- 必须用
linear-gradient配合至少两个颜色断点，形成可识别的纹理（比如 45deg 斜线、水平条纹） -
background-size要设得比容器宽，否则background-position移动没效果 - 动画要设成
infinite，且用ease-in-out或cubic-bezier控制节奏，硬生生用linear就像传送带，不像加载
写一个能复用的 loading-bar 类名
别每次都在 HTML 里写一堆 style，抽成 class 更稳妥。重点是把动画参数和背景尺寸耦合好，不然换颜色或方向就得重调。
.loading-bar {
height: 4px;
background: linear-gradient(90deg, #4f46e5, #818cf8, #4f46e5);
background-size: 200% 100%;
animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
-
background-size: 200% 100%是为了让渐变区域比元素宽一倍，background-position才有足够移动空间 - 动画从
-200%开始，到200%结束，确保无缝循环；如果只写0% → 100%，容易在衔接处卡顿 - 90deg 是水平流动，45deg 是斜向，改角度就能换风格，但注意
background-size的宽高比也要微调
IE 和旧版 Safari 不支持 background-position 动画怎么办
IE 完全不支持 background-position 的 CSS 动画；iOS 12 及更早 Safari 对 background-size + 动画的兼容也不稳。这时候不能硬上，得降级。
- 检测是否支持：用
@supports (animation: shim) and (background-position: 0 0)包一层，里面写现代方案 - 降级方案优先用 SVG
<animate></animate>—— 它在 IE9+ 和老 Safari 都跑得稳，而且控制精度高 - 实在不行就用 JS 控制
width+opacity微调节奏，加个requestAnimationFrame模拟缓动，比纯 CSS 线性动画更像加载
动画太快或太慢？调参看这三处
不是改 animation-duration 就完事。真正影响“感知速度”的是三个地方：背景纹理密度、位移幅度、缓动曲线。
- 想让它“显得快”：把
background-size缩小（比如150% 100%），同样时间内位移覆盖更多视觉单元 - 想让它“显得慢但持续”：加大
background-size（如300% 100%），同时拉长animation-duration - 节奏异常？别碰 duration，先换
cubic-bezier(.2, .8, .4, 1)—— 这个比ease-in-out更贴合真实加载的启动/收尾惯性
最常被忽略的是：动画延迟（animation-delay）设成负值，可以让多个进度条错开启动，避免页面里所有加载条同步抽搐。这点在列表批量加载时特别明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
