移动端骨架屏动画必须用 background-position 驱动，因其不触发重排重绘、全程 gpu 加速且像素对齐精准；而 transform 和 opacity 在 ios safari 与安卓 webview 中会导致发虚、掉帧、光条跳变等问题。
移动端骨架屏必须用 background-position 驱动动画，不能靠 transform 或 opacity；否则 iOS Safari 和安卓 WebView 会出现边缘发虚、掉帧、光条跳变等问题。
为什么 background-position 是唯一可靠的选择
因为 background-position 只改变渐变绘制起点，不触发重排（reflow）和重绘（repaint），全程走 GPU 加速，像素对齐精准。而 transform: translateX() 移动的是整个渲染层，在 Safari 和旧版安卓 WebView 中采样失真；opacity 则根本无法呈现“扫光”结构感，只是一片灰蒙蒙的闪烁。
常见错误现象包括：光效卡在两端不动、扫条突然消失、iOS 上动画卡顿、低端安卓机直接掉到 10fps 以下。
- 必须写单位：
background-position: -200px 0，不能写成-200 0（IE/旧 Chrome 会忽略） - 动画缓动必须用
linear，ease或ease-in-out会让光效在起止点滞留，破坏流动感 - 容器需有明确宽高，且不能依赖
display: contents或visibility: hidden，否则动画不触发
两层 linear-gradient 的写法与参数耦合关系
单层 linear-gradient 只能铺色，画不出头像圆角、标题长条、段落行高等结构轮廓，更无法叠加扫光动效。必须用 background-image 显式声明两层：底层定义结构，上层是半透扫光条。
关键陷阱在于两层必须共用同一组 background-size 和 background-position，否则动画错位、光条漂移。
- 底层结构示例：
radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)（画头像） - 上层扫光示例：
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) -
background-size必须设为固定像素，如200px 100%；rem、vw在 iOS Safari 中完全失效 - 若改了
background-size: 300px 100%，动画关键帧里的background-position也得同步调成-300px 0 → 300px 0
background-size 单位踩坑与响应式补救
background-size: 20rem 100% 或 100vw 100% 在 iPhone 上会退化为默认值，导致光条拉伸、动画卡顿甚至消失。这不是兼容性“差”，而是 WebKit 内核明确不支持这些单位用于背景尺寸计算。
安全写法是固定像素宽度，并确保它明显大于容器本身（比如设为容器宽度的 1.5 倍），再靠容器自身缩放来适配屏幕。
- 推荐写法：
background-size: 300px 100%+width: 100%; max-width: 100% - 如需真正响应式光条宽度，用 JS 动态注入：
el.style.backgroundSize = `${window.innerWidth * 1.5}px 100%` - 必须加
background-repeat: no-repeat，否则重复背景会导致光条跳变 - 移动端务必加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则px尺寸可能被缩放干扰
动画声明与关键帧细节
动画必须声明在元素自身上，不能只靠伪元素或父容器继承；关键帧里 background-position 的起止值要覆盖完整滑动路径，且单位统一。
错误写法：@keyframes shine { from { background-position: 0 0; } to { background-position: 100% 0; } } —— 光条刚移出就重置，视觉断层。
- 正确写法：
@keyframes shine { from { background-position: -200px 0; } to { background-position: 200px 0; } } - 时长建议 1.5s ~ 2s：
animation: shine 1.6s linear infinite，太快像闪烁，太慢显卡顿 - 如需多区块错峰动画，用
animation-delay分别设为0s、0.2s、0.4s，避免所有光条同步扫过 - IE11 降级方案只能用
opacity脉冲，但这是兜底，不是首选
最易被忽略的一点：骨架容器的盒模型（padding、margin、line-height）必须和真实内容完全一致，否则加载完成瞬间会布局跳动——这比没有骨架屏还伤体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
