Tailwind CSS - Transition Timing Function
Tailwind CSS Transition Timing Function是一款实用工具，可让您应用 CSS 过渡的缓动效果，从而实现流畅且可控的动画。
Tailwind CSS Transition Timing Function 类
以下是用于应用平滑过渡计时函数的 Tailwind CSS 过渡计时函数 类列表。
| 类 | CSS 属性 |
|---|---|
| ease-linear | transition-timing-function: linear; |
| ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); |
| ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); |
| ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
Tailwind CSS 过渡计时函数类的功能
- ease-linear此类用于使指定元素的过渡从开始到结束保持相同的速度。
- ease-in此类用于使指定元素的过渡速度在开始时保持慢速，在结束时保持快速。
- ease-out此类用于使指定元素的过渡速度在开始时保持快速，在结束时保持慢速。
- ease-in-out此类是 ease-in 和 ease-out 类的组合，主要用于设置指定元素的默认过渡速度。
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 Timing Function Classes
</h2>
<div class="grid grid-cols-2 gap-2">
<div>
<button class="bg-green-500 rounded-3xl p-4 transition-transform
duration-300 ease-linear hover:scale-90 hover:text-white
hover:font-medium">
Hover :ease-linear
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-4 transition-transform
duration-300 ease-in hover:scale-90 hover:text-white
hover:font-medium">
Hover :ease-in
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-4 transition-transform
duration-300 ease-out hover:scale-90 hover:text-white
hover:font-medium">
Hover :ease-out
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-4 transition-transform
duration-300 ease-in-out hover:scale-90 hover:text-white
hover:font-medium">
Hover :ease-in-out
</button>
</div>
</div>
</body>
</html>
