Tailwind CSS - Transition Delay
Tailwind CSS Transition Delay 是一个用于定义 CSS 过渡开始前的延迟时间的实用程序。
Tailwind CSS Transition Delay 类
以下是用于应用平滑过渡延迟的 Tailwind CSS 过渡延迟 类列表。
| 类 | CSS 属性 |
|---|---|
| delay-0 | transition-delay: 0s; |
| delay-75 | transition-delay: 75ms; |
| delay-100 | transition-delay: 100ms; |
| delay-150 | transition-delay: 150ms; |
| delay-200 | transition-delay: 200ms; |
| delay-300 | transition-delay: 300ms; |
| delay-500 | transition-delay: 500ms; |
| delay-700 | transition-delay: 700ms; |
| delay-1000 | transition-delay: 1000ms; |
Tailwind CSS 过渡延迟类的功能
- delay-*: 类用于在过渡效果开始前添加延迟。{*} 此处指定不同的 transition-delay 值，可根据需要设置。
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 Delay Classes
</h2>
<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 :Delay-300
</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 :Delay-500
</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 :Delay-700
</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 :Delay-1000
</button>
</div>
</div>
</body>
</html>
