Tailwind CSS - Transition Property
Tailwind CSS Transition Property 过渡属性是一个实用类，允许我们将过渡效果应用于 CSS 属性。
Tailwind CSS Transition Property 过渡属性类
以下是用于应用平滑过渡的 Tailwind CSS Transition Property 过渡属性 类列表。
| 类 | CSS 属性 |
|---|---|
| transition-none | transition-property: none; |
| transition-all | transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
| transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
| transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
| transition-opacity | transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
| transition-shadow | transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
| transition-transform | transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
Tailwind CSS 过渡属性类的功能
- transition-none:此类用于从属性中删除过渡效果。
- transition-all:此类用于将过渡效果应用于所有属性。
- transition:此类是用于对多个属性应用过渡效果的简写属性。
- transition-colors:此类用于应用与颜色相关的过渡效果。
- transition-opacity:此类用于与不透明度相关的过渡效果。
- transition-shadow:此类用于应用与阴影相关的过渡效果。
- transition-transform:此类用于应用与变换相关的过渡效果。
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 Property Classes
</h2>
<div class="grid grid-cols-2 gap-2">
<div>
<button class="bg-green-500 rounded-3xl p-3 transition-transform
hover:scale-90 hover:text-white hover:font-medium">
Hover: Transition-transform
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-3 transition-colors
hover:text-white hover:font-medium hover:bg-green-700">
Hover: Transition-color
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-3 transition
hover:opacity-30 hover:text-white
hover:font-medium">
Hover: Transition-opacity
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-3 transition-shadow
hover:shadow-2xl shadow-green-950/40
hover:text-white hover:font-medium">
Hover: Transition-shadow
</button>
</div>
<div>
<button class="bg-green-500 rounded-3xl p-3 transition-none
hover:text-white hover:font-medium">
Hover: Transition-none
</button>
</div>
</div>
</body>
</html>
