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>

列印頁面