background-position动画无效主因是缺少可平移背景图，需用linear-gradient等带纹理的背景并设background-size，配合固定宽高和linear缓动函数才能实现均匀扫描效果。
background-position动画为什么不动
直接写 background-position: 0 0; + animation 却没反应？大概率是漏了 background-image 或背景图没设成线性渐变/纯色图——骨架屏动效依赖的是「可平移的背景图」，不是随便一个背景都能动。CSS 动画对 background-position 的驱动前提是：该属性必须作用在有实际像素内容的背景上，比如 linear-gradient 生成的条纹，或 base64 编码的细纹 PNG。
实操建议：
- 用
linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)搭配background-size: 200% 100%，这样background-position: -100% 0→0 0才能扫出明显流动感 - 避免用
background: #f0f0f0这类单色——它没有纹理，位移毫无视觉变化 - 确保元素有明确宽高（骨架块常为
display: block且无内容，不设height就塌缩，动画自然不可见）
animation-timing-function选ease-in-out还是linear
选 linear。骨架屏要的是均匀、持续的「扫描感」，不是缓入缓出的强调效果。用 ease-in-out 会让光标在两端明显减速，中间加速，反而像卡顿；而 linear 保证位移速度恒定，更贴近真实加载扫描的机械感。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 动效看起来“一顿一顿”——大概率用了默认
ease或未声明timing-function - 扫描条在起点/终点停留过长——
ease-in-out在 0% 和 100% 附近斜率趋近于 0，视觉上就是停顿 - 想靠延长
animation-duration来“慢一点”，结果只是拖长停顿时间，没解决节奏问题
如何让多个骨架块同步闪烁而非各自乱跑
关键在共用同一套 @keyframes 定义 + 统一 animation-delay: 0s。很多人给每个骨架项单独加不同 delay，以为能做出“波浪入场”，结果加载时各动各的，失去整体节奏感。
使用场景：列表骨架、卡片组、表单字段组——这些本应呈现统一加载状态，不是独立组件。
实操建议：
- 定义一个全局动画，如
@keyframes skeleton-shine { to { background-position: 200% 0; } } - 所有骨架元素统一应用：
animation: skeleton-shine 1.5s infinite;，不加delay - 若真需错峰（比如首屏优先），只对第一批元素用
animation-delay: 0s，其余用animation-delay: -0.3s等负值微调起始相位，而非正向延迟
IE11 或旧版 Safari 下 background-position 动画失效
老浏览器对 background-position 的动画支持极弱，尤其 IE11 只认 background-position-x/background-position-y 分离属性，且不支持百分比位移动画。Safari background-position 的 transform 式插值也不稳定。
兼容性影响：
- IE11：动画完全静止，只能降级为纯色背景 + opacity 闪烁（但失去扫描感）
- Safari 10–11：可能出现跳帧、位移突变、或动画中途卡死
- 解决方案不是硬扛，而是检测 + 降级：
@supports (animation: skeleton-shine 1s) and (background-position: 0 0)包裹动效规则，不支持时 fallback 到opacity脉冲
最易被忽略的一点：动效本身不能掩盖结构缺失。如果骨架 DOM 没按真实数据结构占位（比如列表项少写了 margin-bottom，或头像容器没设 border-radius），再顺滑的扫描动画也救不了布局抖动。动效是锦上添花，不是结构补丁。
