bootstrap 5 placeholder动画仅在5.3.0+版本中通过placeholder-glow或placeholder-wave类生效；低版本无@keyframes定义，需手动补全；父容器必须设position: relative、禁用overflow: hidden和transform，且应使用显式宽高而非栅格类，切换时用opacity渐变替代display以避免闪烁。
Bootstrap 5 的 placeholder 类本身不带动画，只有在 5.3.0+ 版本中配合 placeholder-glow 或 placeholder-wave 才能实现骨架屏效果；低于 5.3 的版本加了也白加，不是你代码写错了，是 CSS 根本没定义。
怎么判断 placeholder 动画是否真生效
先看版本：打开 node_modules/bootstrap/dist/css/bootstrap.min.css，搜索 @keyframes placeholder-glow ——搜不到就是没支持。CDN 用户检查链接是否含 @5.3.0 或更高（如 https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css）。
再看类名组合：placeholder 必须和 placeholder-glow 或 placeholder-wave 同时存在，单独写 placeholder 只是一块静态灰块。
最后看渲染环境：用 DevTools 检查元素 computed 样式，确认 background-image 和 animation 属性是否被正确应用，而不是被父级 overflow: hidden 或 transform 截断。
placeholder-wave 动画总错位、卡顿、一闪而过
这是最常踩的坑，问题几乎全出在父容器上：
-
position: relative必须加在直接父容器上，否则波纹位移参考系是视口，一滚动就“飞走” - 禁用
overflow: hidden（比如.card默认带这个），它会裁掉动画所需的背景渐变延伸区域 - 避开
transform: scale()、translateZ(0)、will-change: transform等触发新层叠上下文的属性，它们会重置背景坐标系 - 别用栅格类（如
col-6）直接套 placeholder 容器——宽度靠 JS 计算或浏览器回流，动画帧可能和尺寸计算不同步；改用显式width: 200px; height: 32px;
加载完成时骨架屏闪一下？别用 display 切换
直接 element.style.display = 'none' 或 innerHTML = '' 会导致占位背景动画最后一帧和真实内容字体渲染节奏错开，视觉上“跳一下”。更稳的做法是用 opacity 渐变：
- 加载开始前：给骨架容器加
transition: opacity .2s ease-out - 图片/数据就绪后：先设
element.style.opacity = '0' - 等
transitionend事件触发，再element.remove()或替换内容 - 绝对不要用
visibility: hidden——它保留布局空间，可能撑开卡片、影响后续 flex 排列
为什么不用 Bootstrap 4 的 placeholder 模拟方案
Bootstrap 4 根本没有 placeholder 相关 CSS 规则，所谓“模拟”只是用 bg-light rounded 做个静态色块，既没动画也没语义。而 Bootstrap 5 的 placeholder 类默认使用 currentColor，不加 bg-* 类时颜色会随父级文本色变化——这点容易被忽略，导致深色主题下占位符看不见。
真正难搞的是 wave 动画对父级布局的隐式依赖：它不报错、不警告，只在特定嵌套结构下突然失效。调试时优先盯住父容器的 position、overflow、transform 这三个属性，比反复检查 placeholder 类名有用得多。
