骨架屏应使用 linear-gradient 配合 background-position 动画实现光扫效果，而非静态灰色块；需设 background-size 大于容器、animation-delay 错开节奏、IE11 降级为 opacity 脉冲，并确保容器有明确宽高。
用 linear-gradient 和 background-position 做骨架屏滑动效果
骨架屏的本质不是“画一堆灰色块”，而是用一个动态移动的渐变遮罩，模拟光扫过的效果。直接给容器设 background-color: #f0f0f0 是静态的，用户一眼看出“这还没加载”，失去意义。
关键在于：用 linear-gradient 创建从左到右的明暗过渡（比如 transparent 0%, #e0e0e0 50%, transparent 100%），再通过 background-position 水平位移，配合 animation 让它持续向右滑动。
- 渐变方向必须是
to right（或90deg），否则滑动方向错乱 -
background-size要设成宽度大于容器（如200% 100%），否则位移一卡就消失 - 动画时长建议
1.5s ~ 2s，太快像闪烁，太慢显卡顿
CSS 动画声明里必须写 background-position 而非 transform
有人试过用 transform: translateX() 移动整个背景层，结果发现盒子边缘出现锯齿、模糊，尤其在 Safari 和部分安卓 WebView 中。这是硬件加速导致的采样问题——transform 移动的是渲染层，而骨架屏需要像素级精准的渐变对齐。
正确做法是只动 background-position，它不触发重绘，只重排背景绘制起点，兼容性好、性能稳。
立即学习“前端免费学习笔记（深入）”；
- 动画关键帧必须写成
@keyframes shine { from { background-position: -200% 0; } to { background-position: 200% 0; } } - 不能省略单位（
0要写成0%或0px），IE 和旧版 Chrome 会忽略无单位值 - 如果盒子有
border-radius，确保overflow: hidden，否则渐变滑出圆角区域会露白边
如何让多个骨架元素节奏错开避免“齐步走”
所有骨架条一起滑，反而显得机械假——真实加载是异步的。CSS 本身不支持随机 delay，但可以用预设几档 stagger 值手动破齐。
- 给不同骨架块加不同 class，比如
.skeleton-title、.skeleton-avatar、.skeleton-paragraph - 分别设
animation-delay: 0s/0.3s/0.6s，形成自然错落感 - 别用 JS 动态加 delay，首屏骨架必须纯 CSS，否则 SSR 或禁 JS 环境下失效
- 如果项目用 CSS-in-JS（如 styled-components），把 delay 写进样式字符串里，别抽成变量传入，避免服务端渲染时无法内联
IE11 兼容要砍掉 background-image: linear-gradient 吗？
不用砍，但得降级。IE11 支持 linear-gradient，但不支持动画中改变 background-position（会静止不动）。这时候 fallback 方案不是换颜色，而是换动画逻辑。
- 用
@supports not (animation-timeline: none)或更稳妥的@supports (background-position: 0 0) and (animation: none)包裹现代写法 - IE11 下改用
opacity脉冲动画（0.4 → 0.7 → 0.4），节奏稍慢（2.5s），视觉上仍是“未就绪”状态 - 千万别用
filter: grayscale()做骨架，它在 IE11 渲染极慢，且和 transform 冲突导致闪屏
width/height 或 min-height 的空盒子，在 flex/grid 容器里可能坍缩为 0，渐变根本没地方画。宁可写 min-height: 1em，也别依赖内容撑开。 
