background-position 动画是移动端骨架屏唯一可行方案，因其由 GPU 合成层加速、不触发重排重绘、像素对齐精准，且在 iOS Safari 12.2+ 与 Chrome 62+ 全线稳定；两层 linear-gradient 需显式声明并强耦合参数，background-size 必须用 px 单位，伪元素 + overflow: hidden 为防错位底线。
为什么 background-position 动画是移动端骨架屏唯一可行方案
在 iOS Safari 和多数安卓 WebView 中，transform: translateX() 会边缘发虚、掉帧甚至完全失效；opacity 动画则毫无结构感，加载完成时还容易闪一下。只有 background-position 动画由 GPU 合成层直接加速，不触发重排重绘，像素对齐精准，且从 iOS Safari 12.2+ 到 Chrome 62+ 全线稳定。
两层 linear-gradient 必须显式声明且参数强耦合
单层渐变只能铺灰，无法同时表达「静态结构 + 扫光动效」。必须用 background-image 显式写两层：
- 底层：画头像圆角、标题长条等语义区块，例如
linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%) - 上层：模拟扫描光，例如
linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) - 两层共用同一组
background-size和background-position，否则光条漂移、错位 -
background-repeat: no-repeat必须加，否则重复导致闪烁跳变
background-size 单位必须用 px，不能用 rem/vw
iOS Safari（所有 WebKit 内核）根本不支持 rem、vw 作为 background-size 的单位，写了等于没写——会退化为默认值，造成光条拉伸变形、动画卡顿甚至消失。
- 宽度设为大于容器的固定值，如
background-size: 200px 100%或200% 100%，确保位移有足够空间 - 适配交给容器本身：用
width: 100%; max-width: 100%配合viewport中的width=device-width, initial-scale=1 - 高度保持
100%，避免缩放失真
伪元素 + overflow: hidden 是防错位底线
动画不能直接绑在骨架容器上，否则内容加载后动画还在跑，多个节点还可能复用动画实例导致节奏混乱。真正生效的是每个骨架子元素的 ::before 伪类：
- 父容器必须设
position: relative -
::before必须带content: ""和position: absolute - 所有骨架容器必须加
overflow: hidden，否则圆角区域光效滑出会漏白边 - 加载完成瞬间用
display: none移除，不是靠opacity淡出或等动画播完——否则真实内容插入时会重排“跳一下”
最易被忽略的一点：动画延迟要错开。列表项如果共用同一套 animation，会集体跳闪，失去“逐行加载”的真实感。animation-delay 不能手写多个固定值，得用 CSS 自定义属性或 JS 动态注入，否则维护成本陡增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
