如何在Tailwind CSS中实现类似于骨架屏的CSS闪烁加载动画？-css教程-PHP中文网

必须手写@keyframes实现骨架屏扫描效果，通过bg-gradient-to-r与background-position百分比位移模拟光扫，配置animate-skeleton并重启dev server，容器需有固定宽高且非inline。

如何在tailwind css中实现类似于骨架屏的css闪烁加载动画？

用 `@keyframes` 定义闪烁动画，别依赖插件

Tailwind 默认不提供骨架屏动画，animate-pulse 只是简单透明度变化，不够拟真。真正接近骨架屏效果（比如渐变色扫过、明暗交替）必须手写 @keyframes。直接在 tailwind.config.js 的 theme.extend.animation 里加就行，不用引入额外库。

常见错误是把动画写在 CSS 文件里却没配置进 Tailwind，导致 animate-skeleton-scan 类名无效；或者用 opacity 单一属性做“闪烁”，结果看起来像灯泡开关，不是骨架屏那种流动感。

推荐用 background-position + linear-gradient 模拟光扫效果，比纯 opacity 更真实
动画时长控制在 2s 左右，太快显得慌，太慢失去加载感
务必配 background-size: 200% 200%，否则渐变平移会跳变

给元素加骨架背景，`bg-gradient` 比 `bg-gray-200` 更靠谱

单纯设 bg-gray-200 再加 animate-pulse，只是颜色呼吸，没有“扫描线”动态感。骨架屏的核心是模拟光从左到右掠过的效果，得靠渐变位移。

典型写法是：bg-gradient-to-r from-transparent via-gray-200 to-transparent，再配合自定义动画移动 background-position。注意：这个渐变必须设在容器上，且容器需有固定宽高或 min-w-/h- 类，否则动画不可见。

容器不能是 inline 元素，否则 background 不生效，优先用 block 或 flex
如果内容区本身有背景色，记得先清空：bg-transparent
移动端要测试 background-size 值，过大可能导致扫动过快

`animate-skeleton` 类名怎么配进 Tailwind 配置

在 tailwind.config.js 的 theme.extend 里补全动画定义，不是只写名字——漏掉 keyframes 就等于没写。

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

module.exports = {
  theme: {
    extend: {
      animation: {
        skeleton: 'skeleton 2s ease-in-out infinite',
      },
      keyframes: {
        skeleton: {
          '0%': { backgroundPosition: '0% 50%' },
          '100%': { backgroundPosition: '200% 50%' },
        }
      }
    }
  }
}

注意：backgroundPosition 值用百分比而非 px，适配不同宽度容器；ease-in-out 比 linear 更自然，避免机械感。