用 background-position 动画实现骨架屏因性能更优且效果更真实：它走合成层不触发重绘，配合 background-size: 300% 100% 和错开的 keyframes（如 200% 0 → -200% 0）可形成连续扫描光效；需避免固定透明度、合理设置 animation-delay 错峰、用伪元素或 wrapper 承载动画，并确保 background-size 与 background-position 单位匹配。
直接用 background-image: linear-gradient() + animation 就能做出骨架屏动效，不需要 JS 控制显隐，也不依赖框架。
为什么用 background-position 动画而不是 opacity
opacity 动画会触发重绘（repaint），尤其在多占位块同时闪烁时，低端设备容易掉帧；而 background-position 仅改变背景偏移，走的是合成层（compositor），性能更稳。另外，渐变“扫描光”效果比单纯闪烁更贴近真实内容加载节奏，用户感知延迟更低。
- 必须配
background-size: 300% 100%，否则background-position移动无效 - @keyframes 中起始和结束位置要错开，比如
200% 0→-200% 0，才能形成连续流动感 - 避免给占位元素设
opacity: 0.5等固定透明度——它会削弱渐变对比，让“光效”发灰
如何让每个骨架块动画错峰出现
靠 animation-delay 给不同元素加偏移，模拟内容逐行渲染的节奏。不推荐用 JS 动态加 class，CSS 原生支持更轻量、SSR 友好。
- 用类名如
.skeleton-item:nth-child(1)直接写死 delay，或用 BEM 风格的.skeleton-item--delay-1 - delay 值建议控制在
0.2s–0.6s区间，太短看不出差异，太长显得卡顿 - 注意：若用
flex或grid布局，确保父容器没设overflow: hidden，否则移动中的渐变可能被截断
图片容器里怎么嵌骨架动画又不干扰 img 渲染
不能把 linear-gradient 直接写在 <img> 上——它会覆盖真实图片。正确做法是用伪元素或额外 wrapper 层承载动画背景。
- 推荐方案：用
<div class="img-placeholder"><img src="..."></div>，动画写在.img-placeholder上 - 如果必须单标签，可用
<img>的::before伪元素（需设position: relative） - 务必给容器设明确宽高或
aspect-ratio，否则骨架动画区域会塌缩，光效跑飞
最易被忽略的是 background-size 和 background-position 的单位匹配问题：百分比值必须对应 background-size 的横向倍数，写成 200% 0 却配 background-size: 100% 100%，动画就根本不动。调的时候先删掉 animation，用 devtools 手动拖 background-position 看是否响应，再加动画逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
