Tailwind CSS - 过渡属性

Tailwind CSS 过渡属性是一个实用程序类，允许我们将过渡应用于 CSS 属性。

Tailwind CSS 过渡属性类

以下是用于应用平滑过渡的Tailwind CSS 过渡属性类的列表。

类名	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>

打印页面