background-position动画无效的三大原因：一是背景必须为渐变而非纯色；二是background-size需大于容器且单位兼容；三是元素须有明确宽高。
background-position动画不动？先检查这三件事
动画没反应，90%是因为背景本身不可平移。纯色背景background-color: #f0f0f0再怎么写background-position都没用——它没有纹理，位移无视觉变化。
必须用linear-gradient生成带明暗过渡的背景图，且满足以下三点才有效：
-
background值里明确包含渐变，例如：linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) -
background-size宽度必须大于容器，常见写法是200% 100%或400px 100%（注意：iOS Safari 不支持rem单位） - 元素必须有明确宽高，
display: block+height: 24px或aspect-ratio: 16/9，否则盒子塌缩，动画自然不可见
为什么别用 transform: translateX() 移动骨架光效
有人想用transform: translateX()推动整个伪元素来模拟扫描，结果在 Safari 和部分安卓 WebView 中出现边缘发虚、锯齿——这是硬件加速采样精度下降导致的渐变边界错位。
background-position更可靠，因为它只改变绘制起点，不触发重绘，也不影响布局流。实操中只需确保：
立即学习“前端免费学习笔记（深入）”；
- 动画关键帧里
background-position带单位，比如-200% 0或-200px 0（IE 和旧 Chrome 会忽略无单位的0） - 渐变方向固定为
90deg或to right，避免光效左右颠倒 - 父容器设
overflow: hidden，防止光效滑出时边缘溢出
多个骨架块怎么同步扫描，而不是各自乱闪
给每个.skeleton-title、.skeleton-avatar单独加不同animation-delay，看似能做出“波浪入场”，实际加载时节奏错乱，破坏结构预期。
真正自然的扫描感来自统一节奏+分层控制：
- 所有骨架项共用同一套
@keyframes loading定义，不要复制多份 - 动画统一设
animation-delay: 0s，靠伪元素::before承载光效层，结构层（如文字占位）用静态灰阶背景 - 若需轻微错峰，只对首屏前3个块加
animation-delay: 0.1s，其余保持一致，避免视觉割裂
加载完成时怎么切换，才不跳动
最常踩的坑是用style.display = 'none'或visibility: hidden直接隐藏骨架——前者让 DOM 脱离布局流，后者虽占空间但 JS 显隐时样式可能未就绪，导致短暂闪出原始文字。
正确做法是靠 class 控制透明度与结构占位：
- 初始 HTML 就输出骨架结构，CSS 中定义
.skeleton-active .skeleton-item启用动画和低透明度 - 数据加载完后，JS 只执行
el.classList.remove('skeleton-active') - 真实内容通过
[data-loaded]属性配合opacity和transform渐显，不改动布局尺寸
容易被忽略的是background-size和background-position的数值耦合：改了background-size: 300% 100%，动画关键帧里的background-position就得从-200% 0调成-300% 0，否则光效只扫一半就重头开始。
