background-position动画是唯一靠谱方案，因其仅改变渐变起点、走GPU合成层、不触发重排或发虚，全程60fps；需用background-image: linear-gradient()且配对background-size≥200% 100%、to right方向、带单位的keyframes值、明确宽高及overflow: hidden。
为什么 background-position 动画是唯一靠谱方案
opacity 或 transform 动画在骨架屏场景下会触发重排或边缘发虚，尤其在 iOS Safari 和安卓 WebView 中帧率不稳；而 background-position 仅改变渐变绘制起点，走 GPU 合成层，不重绘像素，动画全程 60fps。关键前提是必须用 background-image: linear-gradient()，不能简写成 background，否则浏览器无法识别为可位移纹理。
怎样写出不闪、不卡、不溢出的流光效果
常见错误是光条一动就消失，或首帧突兀亮起。核心参数必须配对：
-
background-size至少设为200% 100%（横向拉伸 2 倍），否则位移空间不足 - 渐变方向固定用
to right或90deg，反向会破坏阅读流 -
@keyframes中background-position必须带单位，如-200% 0，不能写-200 0（IE/旧 Chrome 直接忽略） - 容器必须有明确宽高，
height不能依赖内容；图片占位优先用aspect-ratio: 4/3+width: 100% - 所有骨架容器加
overflow: hidden，否则圆角区域光效滑出漏白边
如何让列表项闪烁错开、不齐刷刷跳
同步动画暴露“假加载”，真实感来自节奏差异。手写 animation-delay 易漏难维护，推荐两种实操方式：
- 用 CSS 自定义属性批量控制：
--delay: calc(var(--index) * 0.08s)，再在元素上写animation-delay: var(--delay) - 用 SCSS 编译期生成：配合
@for $i from 1 through 10，给.skeleton-item:nth-child(#{$i})注入animation-delay: #{$i * 0.08}s - 避免用
animation-direction: alternate，它会让光效反向跑，和相邻项节奏冲突
图片加载完成时怎样无缝切换掉骨架屏
靠 JS 删除 class 或改 display 会闪一下，正确做法是利用 img 的 load 事件 + CSS 过渡控制不透明度：
立即学习“前端免费学习笔记（深入）”；
- 骨架层初始设
opacity: 1，真实图片设opacity: 0 - 监听
img.onload后，给父容器加一个类如loaded - CSS 写：
.loaded .skeleton { opacity: 0; transition: opacity 0.2s ease-out; }+.loaded img { opacity: 1; } - 注意：过渡时间别超过 0.3s，否则用户会觉得“卡顿”；也别低于 0.1s，否则切换生硬
真正容易被忽略的是伪元素承载动画层——把 background-image 和 animation 全部挪到 ::before 上，主骨架元素只负责结构灰阶和尺寸，这样既防样式污染，又确保光效不随内容插入抖动。
