Tailwind CSS - 動畫

上一頁
下一頁

Tailwind CSS 動畫是一個用於定義元素CSS動畫的實用程式。

Tailwind CSS 動畫類

以下是用於在元素上應用平滑動畫的Tailwind CSS 動畫類的列表。

類名 CSS 屬性
animate-none animation: none;
animate-spin animation: spin 1s linear infinite;
@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
animate-ping animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@keyframes ping {
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
animate-pulse animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: .5;
    }
  }
animate-bounce animation: bounce 1s infinite;
@keyframes bounce {
    0%, 100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

Tailwind CSS 動畫類的功能

  • animate-none: 此類用於從元素中移除動畫。
  • animate-spin: 此類用於透過順時針旋轉元素360度來應用旋轉動畫。
  • animate-ping: 此類用於透過縮放元素並使其淡入淡出應用 ping 動畫。
  • animate-pulse: 此類用於應用脈衝動畫，使元素稍微淡入淡出。
  • animate-bounce: 此類用於應用彈跳動畫，使元素上下彈跳。

Tailwind CSS 動畫示例

以下示例將演示元素的不同動畫。

設定元素旋轉行為

以下示例演示了animate-spin類的用法。

示例

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

設定元素 ping 行為

以下示例演示了animate-ping類的用法。

示例

<!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-8">
        Tailwind CSS Animate Ping Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-ping 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>

設定元素脈衝行為

以下示例演示了animate-pulse類的用法。

示例

<!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-8">
        Tailwind CSS Animate Pulse Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-pulse 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>

設定元素彈跳行為

以下示例演示了animate-bounce類的用法。

示例

<!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-8">
        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>
</body>
</html>
列印頁面
上一頁
下一頁
廣告