Анимация

​

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

​

Вращение

Добавьте утилиту 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>

​

Пинг

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

<span class="relative 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><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-700 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-700 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-700 rounded col-span-2"></div>
          <div class="h-2 bg-slate-700 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-700 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 позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:animate-spin, чтобы применять утилиту animate-spin только при hover.

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

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

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

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:animate-spin, чтобы применить утилиту animate-spin только на экранах среднего размера и выше.

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

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

​

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

​

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

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

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

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

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

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

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

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

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

​

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

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

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

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.