В этой статье мы рассмотрим, как создавать впечатляющие и сложные анимации с помощью TailwindCSS. TailwindCSS — это очень популярная стильная CSS-инфраструктура, которая позволяет разработчикам с легкостью создавать современные, адаптивные и визуально привлекательные пользовательские интерфейсы.
Утилитарный CSS в первую очередь — это идея объединения множества небольших утилитарных классов. При этом цель состоит в том, чтобы позволить вам создавать надежные, масштабируемые и отзывчивые пользовательские интерфейсы для Интернета.
Введение в TailwindCSS
Прежде чем мы углубимся в сложные анимации, давайте кратко представим TailwindCSS. Это CSS-фреймворк, ориентированный на предоставление широкого спектра служебных классов, которые вы можете напрямую применять к своим HTML-элементам, что позволяет создавать компоненты пользовательского интерфейса без написания собственного CSS. Гибкость TailwindCSS позволяет разработчикам создавать различные стили дизайна и анимации без необходимости написания обширного кода CSS.
Предпосылки
- Настройка TailwindCSS
- Базовое понимание 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,5 секунды), чтобы обеспечить синхронизацию.
- Каждая буква «Разработка» и «Дизайн» опускается волнистым узором с задержкой 100 или 150 мс между падением каждой буквы, создавая восхитительный визуальный эффект.
Но как мы это делаем? Мы можем определить только одну анимацию в tailwind.config.js, и нет служебного класса для применения задержки анимации.
Есть 2 способа сделать это.
- Использование произвольных значений
Если нам нужно использовать одноразовое значение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.
Удачной анимации и до встречи в следующий раз! 🚀