如何在Tailwind CSS中实现平滑的CSS过渡效果和关键帧动画？

加 transition 类不会动——必须有起始态和结束态的样式变化，否则过渡根本没东西可“过”；Tailwind 的 transition 系列只控制“怎么变”，不负责“变”，需配合 hover、JS 切换等触发状态变化。

单独加 transition 类不会动——必须有起始态和结束态的样式变化，否则过渡根本没东西可“过”。

为什么加了 transition 却没动画？

最常见的情况是：只写 p transition-all，没配任何状态类（比如 hover:bg-blue-500）或 JS 切换的 class。Tailwind 的 transition 系列只是设置 CSS 的 transition-property、duration 等，它不负责“变”，只负责“怎么变”。

• 用 hover:underline 期望下划线淡入？text-decoration 不支持过渡，浏览器直接忽略
• 对 display: none 或 height: auto 做 transition？这两者不可动画，会卡死或瞬间切换
• JS 切换 class 时用了 hidden？hidden 是 display: none，同样无法过渡

transition-transform 和 transition-opacity 才真能顺滑

GPU 加速、无重排、浏览器优化好——这是真正适合动画的属性。Tailwind 默认的 transition（等价于 transition-colors duration-150）只覆盖颜色、边框、背景等，transform 和 opacity 必须显式声明。

• 缩放动画：用 transition-transform hover:scale-110，不是 transition-all hover:scale-110
• 淡入淡出：用 transition-opacity opacity-0 + JS 切换 opacity-100，别碰 visibility 或 display
• 菜单展开：用 max-h-0 overflow-hidden → max-h-96，不能用 h-0 → h-auto
• 避免 transition-all：它会连 box-shadow、filter 一起动，可能卡顿或抖动

加载时自动播放的动画得靠 @keyframes + animation

悬停、聚焦这些交互态能用 transition，但页面一上来就要动的元素（比如首屏卡片渐显），必须走 CSS 动画。Tailwind 不提供开箱即用的 animate-fade-in，得自己配。

立即学习“前端免费学习笔记（深入）”；

• 在 tailwind.config.js 的 theme.extend.keyframes 里定义：{ 'fade-in': { '0%': { opacity: 0 }, '100%': { opacity: 1 } } }
• 再在 animation 里注册：{ 'fade-in': 'fade-in 0.4s ease-out forwards' }
• HTML 中直接用：animate-fade-in，无需 JS 触发
• 注意加 forwards：否则动画播完会回退到 opacity: 0

伪元素滑入下划线比 text-decoration 更靠谱

想让链接下划线“滑出来”？text-underline 配 transition 没用，因为 text-decoration 属性本身不可过渡。

• 推荐方案：用 border-bottom + scaleX(0) → scaleX(1)，配合 transition-transform
• 父容器加 relative，伪元素 absolute 定位更灵活，但 border 方案不用定位、更轻量
• 别写 hover:border-transparent：这会触发 layout，影响性能
• 缓动函数建议用 ease-out，比默认的 ease-in-out 更自然

真正难的不是写几行 class，而是判断哪个属性能动、哪个不能动，以及什么时候该用 transition、什么时候必须上 animation。很多“没反应”的问题，其实卡在起始/结束态没定义清楚，而不是 Tailwind 本身有问题。