css动画怎么实现加载占位_css动画骨架屏思路

骨架屏是视觉占位与渐变过渡组合，用linear-gradient+background-position动画模拟扫描光效，需固定尺寸、脱离文档流、JS控制显隐，并适配SSR/CSR渲染时机。

用 animation + keyframes 模拟骨架屏闪烁效果

骨架屏本质不是“加载中动画”，而是视觉占位+渐变过渡的组合。CSS 动画只负责「模拟内容未就绪时的视觉节奏」，不参与数据加载逻辑。核心是用 linear-gradient 生成灰白条状背景，再通过 animation 移动 background-position 制造扫描光效。

• 推荐使用 to right 方向的线性渐变，比径向更易控制扫描节奏
• 动画时长建议设为 1.5s ~ 2.5s，太短显急促，太长降低感知响应
• 必须加 background-size: 200% 100%，否则 background-position 位移无效

@keyframes loading-skeleton {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 
200% 100%;
  animation: loading-skeleton 2s ease-in-out infinite;
}

骨架元素需脱离文档流避免重排

如果直接给 加骨架样式，内容加载后替换会触发 layout shift（布局偏移），造成页面抖动。正确做法是让骨架层和真实内容共用同一容器，用 position: absolute 叠加，或用 visibility: hidden 控制显隐而非 display: none。

• 骨架容器设 position: relative，内部骨架元素设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
• 真实内容加载完成时，用 JS 切换类名，把骨架元素 visibility: hidden，而不是移除 DOM
• 避免对骨架元素设置 height: auto，必须固定高度或用 aspect-ratio 保形

.avatar-skeleton {
  border-radius: 50%;
  background: radial-gradient(circle, #f5f5f5 20%, #e8e8e8 80%);
}

.skeleton-line {
  display: block;
  height: 16px;
  margin: 8px 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-skeleton 2s ease-in-out infinite;
}