Переходы и анимация
Утилиты для анимации элементов с помощью CSS-анимаций.
| 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>; |
Используйте утилиту animate-spin, чтобы добавить линейную анимацию вращения к элементам, таким как индикаторы загрузки:
<button type="button" class="bg-indigo-500 ..." disabled> <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> Обработка…</button>Используйте утилиту animate-ping , чтобы сделать элемент масштабируемым и исчезающим, как радарный пинг или рябь на воде - полезно для таких вещей, как значки уведомлений:
<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>Используйте утилиту animate-pulse, чтобы сделать элемент плавно исчезать и появляться - полезно для таких вещей, как скелетные загрузчики:
<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>Используйте утилиту animate-bounce, чтобы сделать элемент прыгающим вверх и вниз - полезно для таких вещей, как индикаторы "прокрутки вниз":
<svg class="size-6 animate-bounce ..."> <!-- ... --></svg>Для ситуаций, когда пользователь указал, что предпочитает уменьшенное движение, вы можете условно применять анимации и переходы, используя варианты motion-safe и 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> Обработка</button>Используйте синтаксис animate-[<value>] , чтобы задать animation на основе полностью пользовательского значения:
<div class="animate-[wiggle_1s_ease-in-out_infinite] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: animate-(<custom-property>)
<div class="animate-(--my-animation) ..."> <!-- ... --></div>Это просто сокращение, animate-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс an animation утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="animate-none md:animate-spin ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.
Используйте переменные темы --animate-* для настройки утилит animation в вашем проекте:
@theme { --animate-wiggle: wiggle 1s ease-in-out infinite; @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }}Теперь утилиту animate-wiggle можно использовать в вашей разметке:
<div class="animate-wiggle"> <!-- ... --></div>Подробнее о настройке темы читайте в документации темы.