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

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

一、UnoCSS动画库的核心能力

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

  1. 预设动画 :如animate-spin(旋转)、animate-bounce(弹跳)
  2. 过渡效果 :如transition-allduration-300
  3. 延迟与缓动 :如delay-200ease-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>

六、性能优化技巧

  1. 硬件加速 :为动画元素添加transform-gpu,启用GPU加速。

    html 复制代码
    <div class="animate-spin transform-gpu"></div>
  2. 减少重绘 :优先使用transformopacity属性,避免布局抖动。

  3. 按需生成 :通过safelist过滤未使用的动画类:

    typescript 复制代码
    safelist: [
      'animate-spin',
      'animate-bounce',
      'animate-fade-in'
    ]

七、说点实在的

UnoCSS动画库的爽点:

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

但也要注意:

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

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

相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net