Tailwind CSS - Animation
Tailwind CSS Animation 是一款用于定义元素 CSS 动画的实用程序。
Tailwind CSS animation 动画类
以下是用于在元素上应用流畅动画的 Tailwind CSS Animation 类列表。
| 类 | 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>
