bootstrap 5 默认不支持 placeholder 动画，需手动添加 placeholder-glow 或 placeholder-wave 类（5.3+），低版本须自定义 keyframes；使用时需注意父容器定位、溢出和变换干扰，并采用 opacity 渐变切换以避免闪烁。

placeholder 动画在 bootstrap 5 中默认不生效

bootstrap 5 移除了 placeholder 类的 css 动画支持，仅保留基础灰阶占位样式。如果你直接写 <div class="placeholder col-6"></div>，它不会动——这不是你代码写错了，是框架本身没提供动画。

必须手动补上 CSS 才能触发波纹式加载效果：

• 加 placeholder-glow 或 placeholder-wave 类（Bootstrap 5.3+ 才有）
• 低版本（如 5.0–5.2）需自行引入 @keyframes placeholder 和过渡规则
• placeholder-wave 要求父容器设 position: relative，否则动画偏移错位

用 placeholder-wave 做骨架屏时的 DOM 结构陷阱

骨架屏不是“随便放几个 placeholder 就行”，placeholder-wave 的动画依赖背景渐变位移，一旦被 flex / grid 容器裁剪或 transform 干扰，就会卡住不动或闪烁。

常见翻车点：

• 父元素用了 overflow: hidden（比如卡片 .card 默认带圆角和隐藏溢出）→ 动画被截断
• 在 transform: scale(0.98) 的容器里嵌套 → 动画坐标系错乱
• 用 col-* 布局但没包在 <div class="row"> 里 → width 计算异常，波纹跑偏<p>稳妥做法：骨架结构用纯 <code>div + placeholder-wave + 显式 width/height，绕开响应式栅格参与渲染。

  如何让骨架屏在数据加载完成时平滑消失

  直接 display: none 切换会闪一下，因为 placeholder 的背景动画和真实内容的字体渲染节奏不同步。

  推荐渐变切换逻辑：

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 给骨架容器加 transition: opacity .2s ease-out
  • 加载开始：移除内容区域，显示骨架，并设 opacity: 1
  • 数据就绪后：先设 opacity: 0，等 transitionend 触发再 removeChild 或 innerHTML = ''
  • 避免用 visibility: hidden → 占位还在，影响布局重排

  示例关键帧：

  element.style.opacity = '0'; setTimeout(() => { element.remove(); }, 200);

  兼容旧版 Bootstrap（v4.x）的骨架屏写法

  Bootstrap 4 没 placeholder 类，得靠自定义类模拟。别用 .bg-light + .rounded 硬凑，那只是静态灰块。

  最小可用方案：

  • 定义 .skeleton 类：含 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)
  • 加 background-size: 200% 100% 和 animation: loading 2s infinite
  • 动画关键帧必须用 @keyframes loading { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
  • 注意：IE11 不支持 background-position 百分比动画 → 若需兼容，改用 JS 驱动 left 位移

  这个方案比引入整个 Skeleton 插件更轻，也更容易和现有 CSS 变量对齐。

  实际做骨架屏最难的不是写动画，是让 placeholder 的尺寸、行高、圆角和最终内容像素级对齐。差 1px 都可能在切换瞬间露白边或抖动，建议用 getComputedStyle 对比骨架与真实组件的 border-radius 和 line-height。