Краткая справка

Класс
Свойства
animate-noneanimation: none;
animate-spinanimation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
animate-bounceanimation: 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); } }

Основы использования

Вращение

Добавьте утилиту animate-spin, чтобы добавить анимацию линейного вращения к таким элементам, как индикаторы загрузки.

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Обработка...
</button>

Ping

Добавьте утилиту animate-ping, чтобы масштабировать элемент и исчезать, как пинг радара или рябь воды - полезно для таких вещей, как значки уведомлений.

<span class="flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>

Пульс

Добавьте утилиту animate-pulse, чтобы элемент плавно появлялся и исчезал - полезно для таких вещей, как загрузчики скелетов.

<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-slate-200 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-200 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-200 rounded col-span-2"></div>
          <div class="h-2 bg-slate-200 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-200 rounded"></div>
      </div>
    </div>
  </div>
</div>

Прыжок

Добавьте утилиту animate-bounce, чтобы элемент подпрыгивал вверх и вниз - полезно для таких вещей, как индикаторы “прокрутки вниз”.

<svg class="animate-bounce w-6 h-6 ...">
  <!-- ... -->
</svg>

Предпочитает ограниченное движение

Для ситуаций, когда пользователь указал, что он предпочитает уменьшенное движение, вы можете условно применить анимацию и переходы, используя варианты motion-safe и motion-reduce:

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Обработка
</button>

Применяя условно

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:animate-spin to only apply the animate-spin utility on hover.

<div class="hover:animate-spin">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:animate-spin to apply the animate-spin utility at only medium screen sizes and above.

<div class="md:animate-spin">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.


Использование пользовательских значений

Настройка вашей темы

Анимация по самой своей природе, как правило, очень привязана к проекту. Анимации, которые мы включаем по умолчанию, лучше всего рассматривать как полезные примеры, и вам предлагается настроить анимацию в соответствии с вашими потребностями.

По умолчанию Tailwind предоставляет утилиты для четырех различных примеров анимации, а также утилиту animate-none. Вы можете настроить эти значения, отредактировав theme.animation или theme.extend.animation в вашем файле tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

Чтобы добавить новую анимацию @keyframes, используйте раздел keyframes конфигурации вашей темы:

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

Затем вы можете ссылаться на эти ключевые кадры по имени в разделе animation конфигурации вашей темы:

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Произвольные значения

If you need to use a one-off animation value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.