В этой статье мы рассмотрим, как создавать впечатляющие и сложные анимации с помощью TailwindCSS. TailwindCSS — это очень популярная стильная CSS-инфраструктура, которая позволяет разработчикам с легкостью создавать современные, адаптивные и визуально привлекательные пользовательские интерфейсы.

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

Введение в TailwindCSS

Прежде чем мы углубимся в сложные анимации, давайте кратко представим TailwindCSS. Это CSS-фреймворк, ориентированный на предоставление широкого спектра служебных классов, которые вы можете напрямую применять к своим HTML-элементам, что позволяет создавать компоненты пользовательского интерфейса без написания собственного CSS. Гибкость TailwindCSS позволяет разработчикам создавать различные стили дизайна и анимации без необходимости написания обширного кода CSS.

Предпосылки

  1. Настройка TailwindCSS
  2. Базовое понимание CSS, анимации в CSS.

Что мы будем строить

Начало работы с CSS-анимацией Tailwind

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

Tailwind CSS предоставляет ограниченный набор служебных классов для анимации, которые можно применять к элементам HTML. Давайте исследуем их.

Применение анимации

У нас есть много предустановленных анимаций, доступных в TailwindCSS, например, Spin, Bounce, Ping, Pulse и т. д. Чтобы применить анимацию к элементу, вам просто нужно добавить класс animate, за которым следует желаемое имя анимации. Например, чтобы применить анимацию вращения, вы можете использовать класс animate-pulse. Давайте посмотрим на пример:

<div class="animate-pulse">
 Look Mom! I am pulsing!
</div>

<!-- 
animate-pulse applies this css to the div

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
} 
-->

Это применит «пульсирующую» анимацию к элементу div, заставляя его пульсировать на экране при загрузке страницы.

Определение пользовательских анимаций

Чтобы создать собственную анимацию или настроить существующую анимацию, мы можем сделать это в файле tailwind.config.js.

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

module.exports = {
  theme: {
    extend: {
      animation: {  
          //Customizing existing animations.
          'spin-slow': 'spin 3s linear infinite',
          
          //Add new animation
          'my-animation' : 'new-animation 3s linear infinite',
      },
      keyframes: {
          //Add keyframes for the new animation here
          'new-animation': {
                '0%': { transform: 'rotate(0deg)' },
                '100%': { transform: 'rotate(360deg)' },
             },
      }
    }
  }
}

С помощью этой утилиты мы будем создавать собственную анимацию. Для этого нам нужно сначала добавить @keyframes нашей анимации.

module.exports = {
  theme: {
    extend: {
      keyframes: {
            //Our fall animation keyframes              
            fall: {
                '0%': { transform: 'translate(0%,-150%) skewX(0deg)' },
                '50%': { transform: 'translate(0%,0%) skewX(-10deg)' },
                '100%': { transform: 'translate(0%,150%) skewX(0deg)' },
              },
            },
      
      animation: {
           // You can then reference these keyframes by name in the 
           // animation section of your theme configuration
           fall: 'fall 3s ease infinite',
           // animation shorthand CSS property i.e
           // animation-name | animation-duration | animation-timing-function 
           // animation-iteration-count
      }
    }
  }
}

Чтобы узнать больше о кратком свойстве css для анимации, посетите https://developer.mozilla.org/en-US/docs/Web/CSS/animation
Вкратце, это что-то вроде этого animation-name, animation-duration, animation-timing-function , animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state и animation-timeline.

Как только мы это сделаем, теперь мы сможем применить нашу анимацию падения к любому элементу, применив класс animate-fall.

Вуаля! Наша анимация падения готова к использованию.

(но подождите минутку….)
(Это не то, что вы обещали в начале, где крутое волнистое падение и второе слово?)

Терпение горько, но плоды его сладки.

Давайте разберем нашу анимацию.

  1. Слово «Разработка» спускается сверху и расширяется наружу к низу.
  2. После выхода из «Разработки» слово «Дизайн» изящно спускается к центру, стараясь ввести задержку, равную половине одного цикла анимации (в данном случае 1,5 секунды), чтобы обеспечить синхронизацию.
  3. Каждая буква «Разработка» и «Дизайн» опускается волнистым узором с задержкой 100 или 150 мс между падением каждой буквы, создавая восхитительный визуальный эффект.

Но как мы это делаем? Мы можем определить только одну анимацию в tailwind.config.js, и нет служебного класса для применения задержки анимации.

Есть 2 способа сделать это.

  1. Использование произвольных значений
    Если нам нужно использовать одноразовое значение animation, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету, используя любое произвольное значение. значение.
    Ссылка — https://tailwindcss.com/docs/animation#arbitrary-values
<div class="animate-[fall_3s_ease_100ms_infinite]">
  <!-- Adding 100ms delay -->
</div>

<div class="animate-[fall_3s_ease_1s_infinite]">
 <!-- Adding 1s delay -->
</div>

2. Подключаемый модуль TailwindCSS
Подключаемые модули позволяют регистрировать новые стили, которые Tailwind вставляет в таблицу стилей пользователя с помощью JavaScript вместо CSS.

module.exports = {
  plugin(({ matchUtilities, theme }) => {

      //Add the css properties that you use in tailwind
      matchUtilities({
        'animation-delay': (value) => {
          return {
            'animation-delay': value,
          };
        },
      });
    }),
  ],
}

Теперь мы можем ввести задержку перед началом анимации, используя класс animation-delay-[time].

<div className='animate-delay animation-delay-[1000ms]'>
  <!-- Adding 1000ms delay -->
</div>

Как только мы это сделаем, мы можем создать нашу полную анимацию.

 const TypographyAnimation = () => {
  const firstWord = 'develop';
  const secondWord = 'design';

  const renderWordAnimation = (word: string, startingDelay: number) => {
    return word.split('').map((letter, index) => (
      <span
        key={index}
        className={`animate-fall animation-delay-[${
          startingDelay + index * 50
        }ms] translate-y-[-150%]`}
      >
        {letter}
      </span>
    ));
  };

  return (
    <span className='relative inline-flex ml-2 overflow-hidden p-2'>
      <div className='flex flex-row'>
        {renderWordAnimation(firstWord, 0)}
      </div>

      <span className='absolute top-0 bottom-0'>
        <div className='flex flex-row'>
          {renderWordAnimation(secondWord, 1500)}
        </div>
      </span>
    </span>
  );
};

Пример JS -› https://codepen.io/Prayas-Lashkari/pen/RwqVzQN

Заключение

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

Как акцию! Не стесняйтесь обращаться ко мне в Twitter или LinkedIn.

Удачной анимации и до встречи в следующий раз! 🚀