Các tiện ích để tạo hiệu ứng động cho các phần tử với CSS animations.
| Class | Styles |
|---|---|
animate-spin | animation: var(--animate-spin); /* spin 1s linear infinite */
@keyframes spin {
to {
transform: rotate(360deg);
}
} |
animate-ping | animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
} |
animate-pulse | animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */
@keyframes pulse {
50% {
opacity: 0.5;
}
} |
animate-bounce | animation: var(--animate-bounce); /* bounce 1s infinite */
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
} |
animate-none | animation: none; |
animate-(<custom-property>) | animation: var(<custom-property>); |
animate-[<value>] | animation: <value>; |
Sử dụng tiện ích animate-spin để thêm hiệu ứng xoay tuyến tính vào các phần tử như chỉ báo đang tải:
<button type="button" class="bg-indigo-500 ..." disabled> <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> Processing…</button>Sử dụng tiện ích animate-ping để làm cho một phần tử phóng to và mờ dần giống như tiếng ping radar hoặc gợn sóng nước—hữu ích cho những thứ như huy hiệu thông báo:
<span class="relative flex size-3"> <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span> <span class="relative inline-flex size-3 rounded-full bg-sky-500"></span></span>Sử dụng tiện ích animate-pulse để làm cho một phần tử mờ dần vào và ra một cách nhẹ nhàng—hữu ích cho những thứ như skeleton loaders:
<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4"> <div class="flex animate-pulse space-x-4"> <div class="size-10 rounded-full bg-gray-200"></div> <div class="flex-1 space-y-6 py-1"> <div class="h-2 rounded bg-gray-200"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="col-span-2 h-2 rounded bg-gray-200"></div> <div class="col-span-1 h-2 rounded bg-gray-200"></div> </div> <div class="h-2 rounded bg-gray-200"></div> </div> </div> </div></div>Sử dụng tiện ích animate-bounce để làm cho một phần tử nảy lên và xuống—hữu ích cho những thứ như chỉ báo "cuộn xuống":
<svg class="size-6 animate-bounce ..."> <!-- ... --></svg>Đối với các tình huống mà người dùng đã chỉ định rằng họ thích giảm chuyển động, bạn có thể áp dụng các hiệu ứng động và chuyển tiếp có điều kiện bằng cách sử dụng các biến thể motion-safe và motion-reduce:
<button type="button" class="bg-indigo-600 ..." disabled> <svg class="mr-3 size-5 motion-safe:animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> Processing</button>Use the animate-[<value>] syntax to set the animation based on a completely custom value:
<div class="animate-[wiggle_1s_ease-in-out_infinite] ..."> <!-- ... --></div>For CSS variables, you can also use the animate-(<custom-property>) syntax:
<div class="animate-(--my-animation) ..."> <!-- ... --></div>This is just a shorthand for animate-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix an animation utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="animate-none md:animate-spin ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
Use the --animate-* theme variables to customize the animation utilities in your project:
@theme { --animate-wiggle: wiggle 1s ease-in-out infinite; @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }}Now the animate-wiggle utility can be used in your markup:
<div class="animate-wiggle"> <!-- ... --></div>Learn more about customizing your theme in the theme documentation.