bootstrap 5 placeholder动画仅在5.3.0+版本中通过placeholder-glow或placeholder-wave类生效；需检查版本、类名组合及父容器的position、overflow和transform设置，并用opacity渐变替代display切换以避免闪烁。
Bootstrap 5 的 placeholder 类本身不带动画，只有在 5.3.0+ 版本中配合 placeholder-glow 或 placeholder-wave 才能生效；低于该版本加了也白加——不是你写错了，是 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 容器——宽度靠浏览器回流计算，动画帧可能和尺寸不同步；改用显式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 排列
真正容易被忽略的是：动画依赖的 background-size 必须设为宽度大于容器（如 200% 100%），且单位不能省略（0 要写成 0% 或 0px），否则 IE 和旧版 Chrome 会忽略关键帧；移动端还要额外加 overflow: hidden 和 aspect-ratio 防圆角露白、比例失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
