因为.card默认white背景完全遮盖底层动画层，且子元素无透明背景；应改用position: relative的.card配合::before伪元素叠加可动画遮罩，并将.card-body等设为transparent。
为什么直接给 .card 加 animation 不生效
Bootstrap 5 的 .card 默认有 background-color: white，会完全盖住底层的骨架动画层；同时卡片内容区域（如 .card-body）没有透明背景，导致你加的渐变遮罩或伪元素动画根本看不见。
解决思路不是“动卡片本身”，而是用伪元素在卡片内部叠加一层可动画的遮罩层，并确保内容区域背景为 transparent 或继承父级透明度。
实操建议：
- 把骨架动画逻辑放在
::before或::after伪元素上，定位到整个卡片可视区 - 给
.card设position: relative，否则伪元素无法绝对定位覆盖 - 将
.card-body、.card-title等子元素的background-color显式设为transparent（Bootstrap 默认不透明） - 动画关键帧必须用
linear-gradient+background-position模拟光扫效果，纯 opacity 闪烁不是骨架屏
background-image: linear-gradient() 骨架条怎么对齐文字高度
常见错误是直接用固定 height: 1rem 做骨架条，结果和 .card-title 或段落行高不匹配，视觉错位明显。
正确做法是让骨架条高度严格跟随文字容器的 line-height 和 font-size。例如，若卡片标题使用 .h5（Bootstrap 默认 font-size: 1.25rem, line-height: 1.2），骨架条高度应设为 1.2em，并用 vertical-align: middle 对齐基线。
实操建议：
- 为不同语义区块写独立类名，比如
.skeleton-title、.skeleton-text，分别控制高度和圆角 -
.skeleton-title用height: 1.2em+border-radius: 0.25em（模拟字体顶部轻微弧度） -
.skeleton-text用height: 1em+margin: 0.5em 0，复现段落行间距 - 所有骨架元素设
background-color: transparent，只靠background-image渲染渐变色块
如何避免骨架屏在加载完成后“闪一下”才显示真实内容
这是最常被忽略的渲染时序问题：Vue/React 组件中，骨架屏 DOM 节点和真实内容节点共存，CSS 动画没停、真实内容却突然 visibility: visible，造成视觉跳变。
核心在于控制“切换时机”——不能等数据一来就立刻 display: none 骨架，而要等动画帧结束、或用 transition 平滑过渡。
实操建议：
- 给骨架容器加
transition: opacity 0.2s ease-out，隐藏前先opacity: 0，再display: none - 在 JS 中触发切换时，先移除动画类（如
animate-pulse），再加is-loaded类，后者控制opacity: 0和pointer-events: none - 不要用
v-if或{data ? <card></card> : <skeleton></skeleton>}这种条件渲染——它会销毁重建 DOM，动画中断不可控 - 推荐方案：同一 DOM 结构，用
class切换状态，骨架层用::before，内容层用真实子元素，靠z-index分层
移动端下 @keyframes 动画卡顿或偏移怎么办
部分 Android WebView 或低端 iOS Safari 会对大范围 background-position 动画做降帧处理，导致光扫速度不均、甚至横向偏移出卡片边界。
根本原因是 background-position: 0% 0%, 100% 0% 在某些引擎里触发了重排而非纯合成，尤其当卡片宽高未显式设定时更明显。
实操建议：
- 给
.card设固定width（如width: 100%）和min-height（如min-height: 120px），避免 layout 波动影响动画锚点 - 改用
transform: translateX()驱动伪元素位移，比background-position更易被 GPU 加速 - 动画时长控制在
1.4s ~ 1.8s，太短显得急促，太长用户感知延迟；循环数设infinite，但 JS 控制类名移除即停 - 加
will-change: transform到动画元素，提前提示浏览器优化
line-height 和 box-sizing 的组合影响。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
