如何利用Tailwind CSS实现CSS动画效果？-css教程-PHP中文网

animate-类不生效主因是keyframes与animation未配对注册，须显式定义且键名一致；transition需搭配状态变更才生效；骨架屏需自定义background-position动画；JS动画应优先用transform/opacity+requestAnimationFrame。

如何利用tailwind css实现css动画效果？

animate-类名写对了但动画不动，90% 是 theme.extend.keyframes 和 theme.extend.animation 没配对。Tailwind 不会自动扫描 CSS 文件里的 @keyframes，必须显式注册。

theme.extend.keyframes 里定义帧逻辑，键名（如 'slide-in'）必须和 theme.extend.animation 中引用的动画名完全一致（包括短横线、大小写）
百分比帧必须用引号包裹：'0%' ✅，0% ❌；支持 'from'/'to'，但别混用
属性值必须是字符串：opacity: '0.3' ✅，opacity: 0.3 ❌；transform: 'translateX(-100%)' ✅，translateX: '-100%' ❌（Tailwind 不识别独立变形子属性）
改完配置必须重启开发服务器，否则新类不会生成

只写 transition-transform 或 transition-all 在元素上，悬停/点击时毫无变化——这不是 bug，是预期行为。Tailwind 的 transition 类只控制“怎么变”，不负责“变”。

必须成对出现：基础样式 + 状态变更（如 hover:scale-110、group-hover:opacity-100、或 JS 切换的 class）
避免对不可过渡属性设 transition：display: none、height: auto、text-decoration 浏览器直接忽略，不会报错但也不动
真正顺滑的属性只有 transform 和 opacity；max-h-0 → max-h-96 可用，但目标值不能写 max-h-full（无法计算）
别用 transition-all：它会尝试过渡 box-shadow、filter 等，容易卡顿或意外抖动

animate-pulse 只是 opacity 呼吸，不是骨架屏那种光扫效果。真实感来自渐变位移，不是颜色明暗切换。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须用 bg-gradient-to-r from-transparent via-gray-200 to-transparent 配合自定义 @keyframes 移动 background-position
关键参数缺一不可：background-size: 200% 200%（否则平移跳变）、bg-no-repeat、容器需有固定宽高（h-10 或 min-h-8），且不能是 inline 元素
动画声明中建议加 forwards：比如 'skeleton-scan': 'skeleton-scan 2s ease-in-out infinite'，否则播完回退到初始位置
命名色（如 red、blue）在 arbitrary value 中不支持插值，要用 rgb(255,0,0) 格式

用 JS 批量更新 class 切换 w-1/4→w-1/2 模拟宽度变化，极易触发重排。性能瓶颈不在“能不能动”，而在“怎么动不打断渲染流水线”。

别反复读取 offsetWidth、clientHeight —— 强制同步布局计算
进度条、缩放等动态效果，用 el.style.transform = 'scaleX(${progress})' 替代 class 切换
批量更新优先包一层 requestAnimationFrame，例如：requestAnimationFrame(() => el.style.opacity = progress)
长时动画（>500ms）可加 will-change: transform 提示浏览器优化，但别滥用，尤其别对大量元素同时加
响应式容器里记得加 min-w-0，否则 flex/gap 可能撑开宽度导致 scaleX 失效