直接用linear-gradient配合background-position动画可实现轻量骨架屏闪烁，需满足三条件：有渐变背景、background-size宽度大于容器、元素有明确宽高；方向推荐90deg，三段色值，timing-function必须为linear，多元素需错开animation-delay。
直接用 linear-gradient 配合 background-position 动画就能做出轻量、不卡顿的骨架屏闪烁效果，不需要 JS、不用 SVG、不触发重排——但必须满足三个硬性条件：有可位移的渐变背景、background-size 宽度大于容器、元素自身有明确宽高。
background-position 动画没反应？先检查这三件事
动画“不动”不是写法错，而是背景本身不可平移：
- 漏了
background-image: linear-gradient(...)—— 单写background-color位移毫无视觉变化 -
background-size没设够大，比如只写100% 100%，位移一到边界就停，看起来像卡死 - 骨架容器没设
width和height（或aspect-ratio），DOM 是空盒子，高度塌缩，动画自然不可见
渐变方向和色带怎么配才像“光扫过”
别用 to bottom 或 to left，阅读习惯决定扫描必须从左向右：
- 方向固定用
90deg或to right，否则动画反向，用户感知混乱 - 至少三段色值：例如
transparent 0%, #e0e0e0 40%, transparent 80%，中间亮条清晰，两端透明过渡自然 - 斜向（如
25deg）虽更拟真，但对齐难度高，移动端易错位，新手建议先从90deg入手
animation 声明里最容易踩的单位和时序坑
IE 和旧 Chrome 会忽略无单位的 0，Safari 对 rem 单位的 background-size 支持差：
立即学习“前端免费学习笔记（深入）”；
-
background-position必须带单位：写-200% 0%，不能写-200% 0 -
background-size别用20rem 100%，改用320px 100%或百分比（如200% 100%） -
animation-timing-function必须是linear，用ease或默认值会导致两端减速，“一顿一顿”的卡顿感
多个骨架项怎么避免集体抽搐式闪烁
列表里每个 .skeleton-item 如果共用同一套 animation-delay 值，加载时会同步跳闪，失去真实感：
- 用 CSS 自定义属性统一控制节奏：比如
--delay: 0.1s，再在子项中写animation-delay: var(--delay) - JS 动态注入时，可按索引生成不同延迟：
element.style.animationDelay = `${i * 0.15}s` - 千万别给每个项手写
animation-delay: 0.1s、0.2s……漏一个就破坏整体节奏
最常被忽略的是 overflow: hidden —— 骨架容器没加它，光效滑出圆角区域会露白边；图片占位没用 aspect-ratio 而是写死 height，缩放后比例失真。这两点在 iPhone 和小屏安卓上几乎必现。
