动画与过渡效果：UnoCSS内置动画库的实战应用

动画和过渡效果是提升用户体验的关键，但写CSS动画总是让人头大：关键帧定义、动画属性、兼容性处理......今天咱们用UnoCSS内置的动画库，直接通过原子类搞定这些烦人的细节，让动画开发变得轻松又高效。

一、UnoCSS动画库的核心能力

UnoCSS内置了丰富的动画工具类，直接开箱即用：

预设动画 ：如animate-spin（旋转）、animate-bounce（弹跳）
过渡效果 ：如transition-all、duration-300
延迟与缓动 ：如delay-200、ease-in-out

先看一个简单的配置（uno.config.ts）：

typescript 复制代码

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons()
  ]
})

二、基础动画实战

2.1 旋转动画

html 复制代码

<div class="w-16 h-16 bg-blue-500 animate-spin"></div>

效果：元素无限旋转，适合加载状态。

2.2 弹跳动画

html 复制代码

<button class="px-6 py-2 bg-green-500 text-white rounded-lg animate-bounce">
  点击我
</button>

效果：按钮上下弹跳，吸引用户注意力。

三、过渡效果实战

3.1 悬停放大

html 复制代码

<div class="w-40 h-40 bg-red-500 transition-transform duration-300 hover:scale-110"></div>

代码解释：

transition-transform：启用变换过渡
duration-300：过渡时长300ms
hover:scale-110：悬停时放大1.1倍

3.2 渐变背景

html 复制代码

<div class="w-40 h-40 bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500 hover:(from-purple-500 to-blue-500)">
</div>

效果：悬停时背景渐变方向反转。

四、组合动画实战

4.1 加载动画

html 复制代码

<div class="flex space-x-4">
  <div class="w-4 h-4 bg-gray-500 rounded-full animate-bounce delay-100"></div>
  <div class="w-4 h-4 bg-gray-500 rounded-full animate-bounce delay-200"></div>
  <div class="w-4 h-4 bg-gray-500 rounded-full animate-bounce delay-300"></div>
</div>

效果：三个圆点依次弹跳，适合加载提示。

4.2 卡片悬停效果

html 复制代码

<div class="group relative w-64 h-64 bg-white shadow-lg rounded-lg overflow-hidden">
  <img src="image.jpg" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"/>
  <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
    <button class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-6 py-2 rounded-full hover:bg-gray-100">
      查看详情
    </button>
  </div>
</div>

效果：悬停时图片放大，遮罩层渐显。

五、自定义动画

5.1 扩展动画库

在uno.config.ts中添加自定义动画：

typescript 复制代码

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        'fade-in': '{0% {opacity:0;} 100% {opacity:1;}}',
        'slide-in': '{0% {transform:translateX(-100%);} 100% {transform:translateX(0);}}'
      },
      durations: {
        'fade-in': '0.5s',
        'slide-in': '0.8s'
      }
    }
  }
})

5.2 使用自定义动画

html 复制代码

<div class="animate-fade-in animate-duration-500">
  淡入效果
</div>
<div class="animate-slide-in animate-duration-800">
  滑入效果
</div>

六、性能优化技巧

硬件加速 ：为动画元素添加transform-gpu，启用GPU加速。
html 复制代码
```
<div class="animate-spin transform-gpu"></div>
```
减少重绘 ：优先使用transform和opacity属性，避免布局抖动。
按需生成 ：通过safelist过滤未使用的动画类：
typescript 复制代码
```
safelist: [
  'animate-spin',
  'animate-bounce',
  'animate-fade-in'
]
```

七、说点实在的

UnoCSS动画库的爽点：

开发效率高：不用写冗长的关键帧定义
代码可读性强：类名即语义，一目了然
维护成本低：修改动画只需调整类名组合

但也要注意：

复杂动画建议走独立CSS文件
动画性能优化不能忽视
别滥用动画，影响用户体验

以上代码已经分享到UnoCss Playground，如有所需，欢迎自取！