骨架屏闪烁关键在于background-image渐变位移：用linear-gradient创建透明渐变条，配合background-size和background-position动画模拟“光扫过”效果，比opacity更轻量；需错开列表项动画延迟、防缩放失真，并为IE11降级为opacity方案。
animation实现骨架屏闪烁的关键是background-image渐变位移
纯CSS骨架屏闪烁不是靠opacity闪，而是用background-image配合linear-gradient和background-position动画制造“光扫过”的错觉。浏览器渲染时，渐变背景的位移比opacity重绘更轻量，尤其在列表项多、DOM深的场景下帧率更稳。
常见错误是直接对background-color做animation——这会触发重排，且无法模拟真实加载时“从左到右亮起”的视觉流。必须用background-image生成一个带透明区的渐变条，再动它的位置：
div.skeleton {
background-image: linear-gradient(
90deg,
transparent 0%,
#f0f0f0 20%,
#e0e0e0 40%,
transparent 60%
);
background-size: 300% 100%;
animation: shine 2s infinite;
}
@keyframes shine {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}多个骨架元素需独立控制动画延迟避免同步闪烁
列表里每个.skeleton-item如果共用同一套animation，会集体跳闪，失去“逐行加载”的真实感。必须用animation-delay错开节奏，但不能手写10个不同值——容易漏、难维护。
- 推荐用CSS自定义属性统一管理：给父容器设
--delay-step: 0.1s，子项用animation-delay: calc(var(--delay-step) * var(--index)) - 实际项目中更稳妥的是JS动态注入
style：遍历所有骨架节点，设element.style.animationDelay = `${i * 0.15}s` - 注意：Safari对
calc()在animation-delay里的支持较晚（iOS 15.4+），老版本需降级为内联style
移动端骨架屏要防住缩放导致的背景拉伸失真
用background-size: 300% 100%时，如果用户双指缩放页面，部分安卓WebView或旧版Chrome会把背景图按视口缩放，导致光效变宽、闪烁变慢甚至卡住。这不是bug，是background-size默认以容器尺寸为基准，而缩放改变了容器的CSS像素计算逻辑。
立即学习“前端免费学习笔记（深入）”；
解法很直接：强制锁定背景尺寸单位为px，并用transform: scale()替代页面缩放（需配合meta viewport禁用user-scalable）：
.skeleton {
/* 不用百分比，改用固定像素 */
background-size: 600px 100%;
/* 动画里也换算成px */
animation: shine-px 2s infinite;
}
@keyframes shine-px {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}IE11及以下不支持background-image动画，得有降级方案
IE11能解析linear-gradient，但不支持background-position动画——整个@keyframes块会被忽略，骨架屏就变成静态灰色块，毫无加载提示。不能只靠@supports检测，因为IE11的@supports (animation: a)会返回true，但它根本跑不动背景动画。
- 最简判断：用
document.documentMode检测是否IE，就切到<code>opacity闪烁方案 - 降级动画别用
0.3s太快：IE重绘慢，opacity动画设成1.2s以上才不卡顿 - 别忘了加
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30)兼容IE8–10
真正麻烦的不是写两套CSS，而是动画节奏要对齐——主流程里animation-duration变了，降级方案也得同步改，否则加载完成时骨架消失的时机就错位。这个细节上线前常被漏测。
