1. 基础动画

2. 进入 / 退出动画

3. 强调动画

使用示例

html

预览

<!-- 引入需先安装预设：npm install @unocss/preset-animations -->
<!-- 配置 unocss.config.ts 引入预设 -->

<!-- 弹跳效果 -->
<div class="animate-bounce p-4 bg-blue-50">弹跳元素</div>

<!-- 旋转加载指示器 -->
<div class="animate-spin w-8 h-8 border-4 border-blue-200 border-t-blue-500 rounded-full"></div>

<!-- 淡入效果 -->
<div class="animate-fade-in p-4 bg-green-50">淡入显示</div>

<!-- 抖动效果（错误提示） -->
<div class="animate-shake p-4 bg-red-50">输入错误</div>

如何使用内置动画

1. 安装动画预设：

npm install @unocss/preset-animations

2. 在 unocss.config.ts 中配置：

import { defineConfig } from 'unocss'
import animations from '@unocss/preset-animations'

export default defineConfig({
  presets: [
    animations(), // 引入动画预设
    // 其他预设...
  ]
})

3. 直接在 HTML 中使用上述工具类即可。

这些内置动画覆盖了大多数常见交互场景，且支持通过 duration-*（时长）、delay-*（延迟）等工具类进一步定制，例如 animate-bounce duration-500 delay-100 可调整动画时长和延迟时间。