background-position 动画比 transform 更可靠，因其纯合成层、不触发重排重绘、GPU 加速稳定；需带单位、设 background-size > 容器、用 90deg 渐变、background-repeat: no-repeat，并双层 gradient 显式声明结构与光效。
为什么 background-position 动画比 transform 更可靠
在 iOS Safari 和多数安卓 WebView 中，transform: translateX() 会触发重排、边缘发虚、锯齿明显，尤其在圆角容器或渐变边界处；而 background-position 是纯合成层动画，不修改布局、不重绘，GPU 加速稳定，像素对齐精准。
必须写单位：比如 background-position: -200px 0 或 -200% 0%，省略单位（如 -200 0）在旧版 Chrome 和 IE 中会被忽略。
-
background-size必须设为宽度 > 容器（如300px 100%或200% 100%），否则位移一到边界就中断，动画“卡死” - 渐变方向固定用
90deg或to right，避免光效反向，违背从左到右的阅读习惯 - 动画声明里必须加
background-repeat: no-repeat，否则多层渐变会重复铺满，导致光条闪烁跳变
两层 linear-gradient 叠加的写法和常见错误
单层 background: linear-gradient() 只能铺一种灰度，无法同时表达「结构占位 + 扫描光效」——这是骨架屏失效最核心的原因。
正确结构是显式用 background-image 声明两层，顺序为「底层结构，顶层光条」，且共用同一组 background-size 和 background-position：
立即学习“前端免费学习笔记（深入）”；
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); background-size: 300px 100%; background-position: -300px 0;
- 第一层控制结构色阶（三色更自然，避免生硬过渡）
- 第二层是带透明度的扫光条，靠 alpha 渐变制造“透出感”
- 错误写法：
background: linear-gradient(...)单值赋值，第二层会被覆盖 - 错误写法：
background-size: 20rem 100%—— iOS Safari 完全不支持 rem 单位，退化为默认值，光条拉伸变形
移动端全屏适配的关键约束
骨架容器本身要撑满视口，但 background-size 必须用固定像素或百分比，不能依赖 rem/vw/vh；适配逻辑应交给容器尺寸和 viewport 设置。
- 全屏骨架容器需设
width: 100%; height: 100vh; overflow: hidden;，防止光效滑出边界露白边 - 图片类占位必须用
aspect-ratio: 4/3+width: 100%，禁用固定height，否则小屏缩放后比例失真 - 所有骨架块（如
.skeleton-header、.skeleton-list）都得加overflow: hidden，圆角区域才不会漏底色 - viewport 必须含
width=device-width, initial-scale=1，否则%单位计算错乱
内联样式与显隐切换的坑点
SSR 或首屏直出时，外链 CSS 有加载延迟，骨架会闪白或错位——必须把骨架样式内联进 <head> 的 <style> 标签里。
- 内联样式中关键规则建议加
!important（仅限此场景），防被后续外链 CSS 覆盖 - 不要用 CSS 变量或嵌套语法，部分旧 WebView 不支持，且内联后难调试
- 显隐切换别用
display: none或删 class，会导致布局重排闪动；推荐用opacity: 0 → 1配合transition: opacity .2s - JS 控制显隐时，监听真实内容的
load或DOMContentLoaded，而非定时器，否则容易切早或切晚
真正难的不是写动画，而是让每一层渐变、每一个尺寸、每一次切换都对齐真实 DOM 的盒模型——稍有偏差，用户就会感知到“跳”或“闪”。
