真正流畅的骨架屏需手写@keyframes配合bg-gradient-to-r与background-position位移实现扫描光效，animate-pulse因仅改变opacity而缺乏方向性与扫描感，不适合骨架屏。
直接用 animate-pulse 做骨架屏，效果生硬、缺乏扫描感，不是“加载中”，而是“在呼吸”。真正流畅的骨架屏动画必须手写关键帧，靠 background-position 移动渐变实现光扫效果。
为什么 animate-pulse 不适合骨架屏
animate-pulse 本质是 opacity 在 0.25–1 之间循环变化，节奏慢（默认 2s）、无方向性，视觉上像一块灰布在轻微明暗起伏。它适合按钮悬停反馈或简单占位闪烁，但无法模拟设计稿里那种从左到右掠过的“扫描光效”。
- 加在父容器上会导致所有子元素叠加闪烁，破坏局部高亮逻辑
- 深色模式下
bg-gray-200可能不可见，需手动配dark:bg-gray-700 - 无法控制光束宽度、速度、起始偏移，调试困难
用 @keyframes + bg-gradient-to-r 实现真实扫描光
核心是创建一个水平渐变遮罩，并让它持续向右平移。这个动画必须定义在 tailwind.config.js 的 theme.extend.animation 中，否则类名无效。
- 渐变写法必须是：
bg-gradient-to-r from-transparent via-gray-200 to-transparent -
background-size至少设为200% 100%，否则位移一到边缘就跳变 - 关键帧必须带单位：
from { background-position: -200% 0; }和to { background-position: 200% 0; }，IE/旧 Chrome 会忽略无单位值 - 容器不能是
inline元素，优先用block或flex，且需有明确宽高（如w-full h-6或min-h-4）
自定义 animate-shimmer 的正确配置方式
在 tailwind.config.js 中添加：
theme: {
extend: {
animation: {
shimmer: 'shimmer 2s infinite',
},
keyframes: {
shimmer: {
'0%': { 'background-position': '-200% 0' },
'100%': { 'background-position': '200% 0' },
}
}
}
}
然后在 HTML 中使用：
<div class="h-6 w-full bg-gradient-to-r from-transparent via-gray-200 to-transparent animate-shimmer"></div>
- 重启 dev server 才能生效，Tailwind 不热更
@keyframes配置 - 移动端注意
background-size值——过大（如 300%）会让扫动过快，建议先用 200% 起步 - 如果容器本身有背景色，务必加
bg-transparent清空，否则渐变被盖住
容易被忽略的兼容性与性能细节
最常卡住的地方不在写法，而在上下文约束：
- 动画必须作用于块级容器，
span或未设display的元素不渲染背景动画 - SSR 场景下，服务端不执行 CSS 动画，但类名存在即可，客户端 hydrate 后自动启动
- 别用
transform: translateX()模拟扫光——Safari 和部分安卓 WebView 会出现边缘模糊、锯齿 - 若需错开多个骨架条节奏，用
animation-delay类（如delay-75），不要改 keyframes
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
