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 过渡示例

在以下示例中，我们将介绍上面提到的部分过渡类。

Open Compiler

<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 动画示例

在以下示例中，我们将介绍上面提到的部分动画类。

Open Compiler

<!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>

打印页面