Tailwind CSS - 過渡與動畫

Tailwind CSS 的過渡和動畫是重要的實用工具類，用於在元素上應用不同的過渡效果和動畫。這些類有助於使元素更具吸引力和效果。它包含一系列 Tailwind CSS 過渡和動畫類，例如過渡延遲、過渡持續時間、動畫等等。

Tailwind CSS 過渡與動畫

以下主題可用於在元素上應用有效的過渡和動畫。

主題	描述	示例
Tailwind CSS - 過渡屬性	Transition 屬性是一個實用工具類，允許我們對 CSS 屬性應用過渡。	嘗試一下
Tailwind CSS - 過渡持續時間	Transition Duration 是一個實用工具類，允許我們為 CSS 過渡應用持續時間。	嘗試一下
Tailwind CSS - 過渡時序函式	Transition Timing Function 類用於應用平滑的過渡時序函式。	嘗試一下
Tailwind CSS - 過渡延遲	Transition Delay 用於定義 CSS 過渡開始之前的延遲。	嘗試一下
Tailwind CSS - 動畫	Animation 類用於為元素定義 CSS 動畫。	嘗試一下

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 Classes
    </h2>
    <p class="mb-3">
        The following example is showing the combine use 
        of transiton property, transition timing function 
        and transition delay classes.
    </p>
    <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 me :)
            </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 me :)
            </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 me :)
            </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 me :)
            </button>
        </div>
    </div>
</body>
</html>

Tailwind CSS 動畫示例

在以下示例中，我們將介紹上面提到的部分動畫類。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
    <h2 class="text-2xl font-bold mb-7">
        Tailwind CSS Animate Bounce Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-bounce delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
    
    <h2 class="text-2xl font-bold my-7">
        Tailwind CSS Animate Spin Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-spin delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
</body>
</html>

列印頁面