06 - Tailwind 效果与动画

过渡与悬停

通过过渡类控制进入和离开时的平滑感。

类名	效果说明
transition-all	常见属性统一过渡
duration-300	过渡时长三百毫秒
hover:scale-105	悬停时轻微放大
hover:-translate-y-[距离]	悬停时上移距离

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <figure class="rounded-xl overflow-hidden bg-white shadow-md transition-all duration-200 hover:-translate-y-5">
    <img class="h-56 w-full object-cover" src="/assets/samples/dnQkJmbtvttdyBj.webp" alt="动画样例图一" />
    <figcaption class="p-3 text-sm text-slate-700">悬停后上移</figcaption>
  </figure>
  <figure class="rounded-xl overflow-hidden bg-white shadow-md transition-all duration-300 hover:shadow-xl hover:scale-102">
    <img class="h-56 w-full object-cover" src="/assets/samples/EvMqUpbtvttdyAn.webp" alt="动画样例图二" />
    <figcaption class="p-3 text-sm text-slate-700">阴影与位移联动</figcaption>
  </figure>
</div>

悬停后上移

阴影与位移联动

滤镜与透明度动画

使用滤镜与透明度做轻量视觉变化。

类名	效果说明
grayscale	初始黑白显示
hover:grayscale-0	悬停后恢复彩色
opacity-70	初始透明度降低
hover:opacity-100	悬停后完全显示

<div class="flex flex-wrap gap-4">
  <img class="h-50 object-cover rounded-lg grayscale hover:grayscale-0 transition-all duration-300" src="/assets/samples/lPVgCTbtvttdBsw.webp" alt="灰度转彩色示例" />
  <img class="h-50 object-cover rounded-lg opacity-10 hover:opacity-100 transition-all duration-300" src="/assets/samples/oTrvHpbtvttdBrm.webp" alt="透明度变化示例" />
  <img class="h-50 object-cover rounded-lg blur-sm hover:blur-none transition-all duration-300" src="/assets/samples/XFNvFvbtvttdyCn.webp" alt="模糊清晰变化示例" />
</div>

关键帧动画

Tailwind 内置多个关键帧工具类，可用于持续动效。

类名	效果说明
animate-spin	连续旋转
animate-pulse	透明度脉冲
animate-bounce	上下弹跳

<div class="flex items-center gap-6 py-4">
  <img class="h-14 w-14 rounded-full object-cover animate-spin" src="/assets/samples/rjyVXvbtvttdyCg.webp" alt="旋转动画示例" />
  <img class="h-14 w-14 rounded-full object-cover animate-pulse" src="/assets/samples/sYICFNbtvttdAsp.webp" alt="脉冲动画示例" />
  <img class="h-14 w-14 rounded-full object-cover animate-bounce" src="/assets/samples/XnTgTdbtvttdBku.webp" alt="弹跳动画示例" />
</div>