Tailwind CSS - 过渡和动画
Tailwind CSS 过渡和动画是重要的实用类，用于在元素上应用不同的过渡效果和动画。这些类有助于使元素更具吸引力和效果。它包含一系列 Tailwind CSS 过渡和动画类，例如过渡延迟、过渡持续时间、动画等等。
Tailwind CSS 过渡和动画
以下主题可用于在元素上应用有效的过渡和动画。
| 主题 | 描述 | 示例 |
|---|---|---|
| Tailwind CSS - Transition 属性 | Trabsition 属性是一个实用程序类，允许我们将过渡应用于 CSS 属性。 |
|
| Tailwind CSS - 过渡持续时间 | Transition Duration 是一个实用程序类，允许我们为 CSS 过渡应用持续时间。 |
|
| Tailwind CSS - 过渡时间函数 | 过渡时间函数类用于应用平滑过渡时间函数。 |
|
| Tailwind CSS - 过渡延迟 | 过渡延迟用于定义 CSS 过渡前的延迟开始 |
|
| Tailwind CSS - 动画 | Animation 类用于定义元素的 CSS 动画。 |
|
Tailwind CSS 过渡示例
在下面的示例中，我们将介绍一些上面提到的过渡类
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-green-100">
<h2 class="text-2xl font-bold mb-3">
Tailwind CSS Transition Classes
</h2>
<p class="mb-3">
The following example is showing the combine use
of transiton property, transition timing function
and transition delay classes.
</p>
<div class="grid grid-cols-2 gap-2">
<div>
<button class="bg-green-500 rounded-3xl p-4 w-44
transition-transform delay-300 ease-linear
hover:scale-90 hover:text-white
hover:font-medium">
Hover me :)
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-4 w-44
transition-transform delay-500 ease-linear
hover:scale-90 hover:text-white
hover:font-medium">
Hover me :)
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-4 w-44
transition-transform delay-700 ease-linear
hover:scale-90 hover:text-white
hover:font-medium">
Hover me :)
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-4 w-44
transition-transform delay-1000 ease-linear
hover:scale-90 hover:text-white
hover:font-medium">
Hover me :)
</button>
</div>
</div>
</body>
</html>
Tailwind CSS 动画示例
在下面的示例中，我们将介绍一些上面提到的动画类
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
<h2 class="text-2xl font-bold mb-7">
Tailwind CSS Animate Bounce Class
</h2>
<div class="flex items-center justify-center
hover:animate-bounce delay-500">
<div class="w-28 h-28 rounded-full bg-yellow-400 relative
flex justify-center align-center">
<div class="absolute top-8 left-6 w-4 h-4 bg-black
rounded-full">
</div>
<div class="absolute top-8 right-6 w-4 h-4 bg-black
rounded-full">
</div>
<div class="absolute bottom-4 w-14 h-6 bg-black
rounded-b-full">
</div>
</div>
</div>
<p>Hover the smile</p>
<h2 class="text-2xl font-bold my-7">
Tailwind CSS Animate Spin Class
</h2>
<div class="flex items-center justify-center
hover:animate-spin delay-500">
<div class="w-28 h-28 rounded-full bg-yellow-400 relative
flex justify-center align-center">
<div class="absolute top-8 left-6 w-4 h-4 bg-black
rounded-full">
</div>
<div class="absolute top-8 right-6 w-4 h-4 bg-black
rounded-full">
</div>
<div class="absolute bottom-4 w-14 h-6 bg-black
rounded-b-full">
</div>
</div>
</div>
<p>Hover the smile</p>
</body>
</html>
