Tailwind CSS — Пользовательские анимации

Анимация оживляет объекты.

Иногда он используется для представления эмоций, уникальных идей, потока и чувств. При этом изображение говорит больше, чем слова, а анимация может передать больше, чем изображение.

Прошли те времена, когда веб-дизайнеры использовали файлы .gif для демонстрации некоторых анимаций. Актуально использовать анимацию CSS вместо использования внешних файлов (мало ли что, это может замедлить работу вашего сайта! 😨).

Однако CSS предоставляет возможность применять анимацию. В этом блоге мы обсудим, как добавить пользовательскую анимацию с помощью Tailwind CSS.

Анимация — это воображение

Здесь я предполагаю, что вы готовы к настройке CSS попутного ветра. Не беспокойтесь, если вы еще не готовы, обратитесь к разделу Настройка попутного ветра CSS. Настройка очень проста.

Оглавление

1. Свойства CSS-анимации
2. Настройка встроенных анимаций
3. Примеры

Давайте начнем!

1. Свойства CSS-анимации

Опустим основные свойства CSS, отвечающие за анимацию.

а. ключевые кадры:

Это то же самое, что мы использовали для анимации CSS. Он используется для изменения набора стилей в определенное время (много раз).

б. анимация:

Это сокращенное свойство для настройки всех свойств анимации, таких как

• имя-анимации: указывает имя анимации @keyframes.
• animation-duration: указывает, сколько времени анимация должна занимать один цикл.
• animation-timing-function: определяет кривую скорости анимации.
• animation-delay: определяет задержку начала анимации.
• animation-iteration-count: указывает, сколько раз должна воспроизводиться анимация.
• animation-direction: указывает направление анимации — вперед/назад или альтернативные циклы.
• animation:этосвойство в основном используется с приемами сокращения, без отдельного упоминания вышеуказанных свойств.

2. Настройте встроенные анимации

Давайте быстро рассмотрим, как мы можем изменить tailwind.config.js для создания пользовательских анимаций.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
  extend: {
    keyframes: {},
    animation: {},
  },
},
 plugins: [],
}

В блоке theme/extend мы можем добавить свойства keyframes и animation пользовательских анимаций.

По умолчанию Tailwind CSS предлагает 4 встроенные анимации, которые также можно изменить с помощью файла tailwind.config.js.

3. Примеры

Давайте изменим вышеуказанные свойства и создадим потрясающую анимацию.

покачиваться

Однако можно использовать стили CSS внутри ключевых кадров и анимации, не указывая это в файле конфигурации попутного ветра.
Рассмотрим случай, когда вам нужно использовать поворот с отрицательными цифрами, которые по умолчанию недоступны. при попутном ветре.

Вы только что создали пользовательскую анимацию 🎉, теперь ее можно использовать как класс «animate-animation_name». напр. анимация-покачивание

Обратите внимание, что каждое свойство, используемое для анимации, animation-duration, animation-delay, animation-iteration-count, также может быть изменено.

сердцебиение

флип по горизонтали

Здесь класс будет доступен как animate-hflip.

флип по вертикали

Здесь класс будет доступен как animate-vflip.

качать

Тем не менее, rotate3d() не предоставляется попутным ветром, его по-прежнему можно использовать в качестве основного свойства CSS с настройкой ключевых кадров.

резинка

Тем не менее, scale3d() не предоставляется попутным ветром, его все еще можно использовать в качестве основного свойства CSS с настройкой ключевых кадров.

вспышка

встряхнуть головой

раскачиваться

желе

Найдите все анимации в tailwind play.

Последние мысли

Добавленные выше анимации могут быть настроены в соответствии с требованиями. Кроме того, его можно исследовать дальше с помощью свойств transform.

Будьте изобретательны, создавайте удивительные !!

Спонсор

Связанные популярные статьи

Спасибо за вашу поддержку!

Если вам нравится то, что вы читаете, обязательно 👏 👏👏 это ниже — как писатель это означает мир!

Подпишитесь на Canopasилисвяжитесь с нами в Twitter, чтобы получать новости об интересных статьях!