Tailwindcss-animate 终极指南：10分钟学会创建惊艳网页动画

【免费下载链接】tailwindcss-animate A Tailwind CSS plugin for creating beautiful animations 项目地址: https://gitcode.com/gh_mirrors/ta/tailwindcss-animate

Tailwindcss-animate 是一款强大的 Tailwind CSS 插件，专为创建惊艳网页动画而设计。无论是淡入淡出、旋转缩放还是滑动效果，这款插件都能让你轻松实现，无需编写复杂的 CSS 代码。本指南将带你快速掌握其核心功能，让你的网页交互瞬间提升一个档次！🚀

快速安装：3步开启动画之旅

1. 安装依赖包

通过 npm 或 yarn 安装 tailwindcss-animate 插件：

npm install -D tailwindcss-animate

2. 配置 Tailwind

在 tailwind.config.js 中添加插件：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-animate"),
    // ...
  ],
}

3. 开始使用动画类

现在你可以在 HTML 中直接使用动画工具类了！

核心动画类型：让元素"活"起来

入场动画：打造惊艳第一印象

使用 animate-in 配合效果类创建元素入场动画：

<!-- 淡入效果 -->
<div class="animate-in fade-in">欢迎信息</div>

<!-- 缩放+淡入组合效果 -->
<div class="animate-in fade-in zoom-in-95 duration-500">卡片内容</div>

<!-- 从左侧滑入 -->
<div class="animate-in slide-in-from-left-72 ease-out">侧边栏</div>

支持的入场效果包括：fade-in（透明度）、zoom-in（缩放）、spin-in（旋转）和 slide-in-from-*（平移），可组合使用创造丰富效果。详细参数可参考 enter-animation.md。

退场动画：优雅告别元素

使用 animate-out 配合效果类实现元素退场动画：

<!-- 淡出效果 -->
<div class="animate-out fade-out">关闭提示</div>

<!-- 缩放+淡出组合效果 -->
<div class="animate-out fade-out zoom-out-95 duration-300">删除卡片</div>

<!-- 向右滑出 -->
<div class="animate-out slide-out-to-right-96">弹出窗口</div>

退场效果与入场效果对应，包括：fade-out、zoom-out、spin-out 和 slide-out-to-*。完整用法见 exit-animation.md。

动画控制：细节决定体验

调整动画时长

使用 duration-{time} 控制动画持续时间：

<div class="animate-in fade-in duration-150">快速动画</div>
<div class="animate-in zoom-in duration-700">缓慢动画</div>

支持的时间值：150ms、300ms、500ms、700ms、1000ms 等，详细参考 animation-duration.md。

设置延迟播放

通过 delay-{time} 实现动画延迟触发：

<div class="animate-in fade-in delay-150">立即播放</div>
<div class="animate-in zoom-in delay-300">延迟300ms</div>

控制播放状态

使用 running 和 paused 控制动画播放状态：

<div class="animate-bounce running">播放中</div>
<div class="animate-spin paused">已暂停</div>

高级技巧：让动画更专业

组合多种动画效果

只要动画属性不冲突，可同时应用多种动画效果：

<div class="animate-in fade-in zoom-in slide-in-from-bottom-48 duration-500">
  组合动画示例
</div>

响应式动画

结合 Tailwind 的响应式前缀，实现不同屏幕尺寸的动画效果：

<div class="animate-in slide-in-from-left md:slide-in-from-right">
  响应式滑动
</div>

尊重用户偏好

使用 motion-safe 前缀确保动画仅在用户未设置"减少动画"时播放：

<div class="motion-safe:animate-in fade-in">
  尊重用户动画偏好
</div>

常见问题解答

Q: 动画不生效怎么办？

A: 检查是否已正确安装插件并添加到 tailwind.config.js，确保动画类拼写正确，且元素具有可见性（非 display: none）。

Q: 如何自定义动画参数？

A: 可以通过 Tailwind 配置文件扩展主题，添加自定义的动画时长、延迟等参数。

Q: 支持哪些浏览器？

A: 支持所有现代浏览器，对于旧浏览器（如 IE）可能需要添加 CSS 前缀。

通过本指南，你已经掌握了 tailwindcss-animate 的核心用法。现在就动手尝试，为你的网页添加生动有趣的动画效果吧！更多高级用法可查阅完整文档目录：

• 基础动画控制
• 入场动画详解
• 退场动画详解
• 动画时间函数

只需几行代码，就能让你的网页从静态变为动态，从普通变为惊艳！✨

【免费下载链接】tailwindcss-animate A Tailwind CSS plugin for creating beautiful animations 项目地址: https://gitcode.com/gh_mirrors/ta/tailwindcss-animate