animate-pulse无法实现波浪效果，因其仅支持缩放与透明度变化，缺乏水平位移及光栅扫描般的流动感；需用@keyframes自定义wave动画，结合双层背景渐变与cubic-bezier缓动控制节奏。
为什么直接用 animate-pulse 做不出波浪效果
animate-pulse 只是简单缩放+透明度闪烁，没有水平位移，更不模拟光栅扫描或波浪推进感。骨架屏要“像加载中”，关键在视觉节奏：从左到右、明暗交替、略带延迟的流动感。Tailwind 默认动画库里没这个，得自己补。
用 @keyframes + animate-[name] 自定义波浪动画
核心是两层叠加：底层用 bg-gray-200 做静态占位，上层用渐变色块模拟“光扫过”的高亮区域，并让它水平移动。Tailwind 允许直接写 @keyframes 到 CSS，再通过 animate-[wave] 调用。
实操建议：
- 在
src/styles.css或tailwind.config.js的theme.extend.animation里注册动画，但更推荐直接写 CSS —— 因为需要控制background-position和background-size - 动画关键帧必须包含
background-position: -200% 0, 100% 100%→200% 0, 100% 100%，才能让渐变条从左进、右出 - 别用
infinite linear硬套；加cubic-bezier(0.4, 0, 0.2, 1)让运动更自然，避免机械感 - 示例片段（放入全局 CSS）：
@keyframes wave { 0% { background-position: -200% 0, 100% 100%; } 100% { background-position: 200% 0, 100% 100%; } } .animate-wave { animation: wave 2s ease-in-out infinite; background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent), linear-gradient(#e2e8f0, #e2e8f0); background-size: 200% 100%, 100% 100%; background-repeat: no-repeat; }
如何让骨架元素响应式适配不同尺寸容器
波浪动画在小屏上太快、大屏上太慢，是因为固定 2s 动画时长没考虑容器宽度。实际项目中，常见错误是给所有骨架项统一加 animate-wave，结果卡片列表里每个 item 波浪节奏完全一致，反而假。
立即学习“前端免费学习笔记（深入）”；
解决思路：
- 用
min-w-类（如min-w-32）约束骨架宽度，避免动画在极窄容器里“闪断” - 对不同层级组件差异化控制：列表项用
animate-wave，头像用animate-wave-slow（单独定义 3s 动画），文字行用animate-wave-fast（1.2s） - 如果用 React/Vue，可动态绑定 class：
class="animate-wave {{ isMobile ? 'duration-2500' : 'duration-1500' }}" - 注意：
background-size: 200% 100%中的200%是相对自身宽度，不是父容器 —— 所以骨架元素本身宽度变化，动画跨度会自动适应
为什么骨架屏在 SSR/SSG 下可能首次渲染就“动起来”
Next.js 或 Nuxt 等框架服务端渲染时，CSS 动画默认会执行，导致首屏一出来就在动，违背“加载中才出现”的语义。这不是 Tailwind 的锅，是浏览器对内联 @keyframes 的行为。
规避方法：
- 把
animate-wave类改为条件添加：只在数据 loading 状态为true时才加，服务端初始状态设为false - 用
useEffect在客户端挂载后才添加 class（React）或onMounted（Vue），确保服务端不触发 - 不要用
className="animate-wave"写死；改用className={isLoading ? "animate-wave" : ""} - 额外提醒：Tailwind 的
dark:变体对动画无效，深色模式下需手动重写background-image的颜色值
波浪动画真正难的不是写出来，而是让它的速度、延迟、颜色过渡和 DOM 生命周期严丝合缝 —— 少一个环节，用户就会觉得“卡顿”或“假加载”。
