Bootstrap 5.3.0+ 才支持 placeholder 动画，需同时使用 placeholder + placeholder-glow/wave 类；验证需查版本、类名组合及 computed 样式；父容器的 position、overflow、transform 等属性极易导致动画失效或错位。
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 排列
真正容易被忽略的是：placeholder 动画不是“加个类就动”，而是对父容器 CSS 状态极其敏感。哪怕只是多了一个 overflow: hidden 或漏写 position: relative，整个波纹就失效——它不像 JavaScript 那样报错，而是静默失败，让人反复怀疑是不是自己漏写了 JS 或路径不对。
