1. Переходы и анимация
  2. animation

Переходы и анимация

animation

Утилиты для анимации элементов с помощью CSS-анимаций.

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

Подробнее о настройке темы читайте в документации темы.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков