tailwindcss animate

tailwindcss-animate

Плагин CSS Tailwind для создания красивой анимации.

 <!-- Add an animated fade and zoom entrance -->
< div class =" animate-in fade-in zoom-in " > ... </ div >

<!-- Add an animated slide to top-left exit -->
< div class =" animate-out slide-out-to-top slide-out-to-left " > ... </ div >

<!-- Control animation duration -->
< div class =" ... duration-300 " > ... </ div >

<!-- Control animation delay -->
< div class =" ... delay-150 " > ... </ div >

<!-- And so much more! --> 

Установка

Установите плагин от NPM:

npm install -D tailwindcss-animate

Затем добавьте плагин в свой файл tailwind.config.js :

 // @filename tailwind.config.js
module . exports = {
	theme : {
		// ...
	} ,
	plugins : [
		require ( "tailwindcss-animate" ) ,
		// ...
	] ,
} 

Документация

• Основное использование
  • Изменение задержки анимации
  • Изменение направления анимации
  • Изменение продолжительности анимации
  • Изменение режима заполнения анимации
  • Изменение количества итерации анимации
  • Изменение состояния анимации воспроизведения
  • Изменение функции времени анимации
  • Предпочитает-уменьшенное движение
• Введите и выходят анимации
  • Добавление ввода анимации
  • Добавление анимации выхода
  • Изменение введите анимацию начало непрозрачности
  • Изменение начала анимации вращения анимации
  • Изменение шкалы начала анимации ввода
  • Изменение ввода анимационной анимации переводит перевод
  • Изменение анимации выхода заканчивает непрозрачность
  • Изменение ротации анимации выхода
  • Изменение шкалы окончания анимации выхода
  • Изменение окончания анимации выхода

Основное использование

Изменение задержки анимации

Используйте утилиты delay-{amount} для управления animation-delay элемента.

 < button class =" animate-bounce delay-150 duration-300 ... " > Button A </ button >
< button class =" animate-bounce delay-300 duration-300 ... " > Button B </ button >
< button class =" animate-bounce delay-700 duration-300 ... " > Button C </ button >

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

Изменение направления анимации

Используйте утилиты direction-{keyword} для управления animation-delay элемента.

 < button class =" animate-bounce direction-normal ... " > Button A </ button >
< button class =" animate-bounce direction-reverse ... " > Button B </ button >
< button class =" animate-bounce direction-alternate ... " > Button C </ button >
< button class =" animate-bounce direction-alternate-reverse ... " > Button C </ button >

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

Изменение продолжительности анимации

Используйте утилиты duration-{amount} для управления animation-duration элемента.

 < button class =" animate-bounce duration-150 ... " > Button A </ button >
< button class =" animate-bounce duration-300 ... " > Button B </ button >
< button class =" animate-bounce duration-700 ... " > Button C </ button >

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

Изменение режима заполнения анимации

Используйте утилиты fill-mode-{keyword} для управления animation-fill-mode элемента.

 < button class =" animate-bounce fill-mode-none ... " > Button A </ button >
< button class =" animate-bounce fill-mode-forwards ... " > Button B </ button >
< button class =" animate-bounce fill-mode-backwards ... " > Button C </ button >
< button class =" animate-bounce fill-mode-both ... " > Button C </ button >

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

Изменение количества итерации анимации

Используйте утилиты repeat-{amount} для управления анимационной animation-iteration-count .

 < button class =" animate-bounce repeat-0 ... " > Button A </ button >
< button class =" animate-bounce repeat-1 ... " > Button B </ button >
< button class =" animate-bounce repeat-infinite ... " > Button C </ button >

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

Изменение состояния анимации воспроизведения

Используйте running и paused утилиты для управления animation-play-state элемента.

 < button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >

Узнайте больше в документации по анимации.

Изменение функции времени анимации

Используйте утилиты ease-{keyword} для управления animation-timing-function элемента.

 < button class =" animate-bounce ease-linear ... " > Button A </ button >
< button class =" animate-bounce ease-in ... " > Button B </ button >
< button class =" animate-bounce ease-out ... " > Button C </ button >
< button class =" animate-bounce ease-in-out ... " > Button C </ button >

Узнайте больше в документации по функции времени анимации.

Предпочитает-уменьшенное движение

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

 < button class =" motion-safe:animate-bounce ... " > Button B </ button >

Введите и выходят анимации

Добавление ввода анимации

Чтобы дать элементу анимацию Enter, используйте утилиту animate-in , в сочетании с некоторыми утилитами fade-in , spin-in , zoom-in и slide-in-from .

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in spin-in ... " > Button B </ button >
< button class =" animate-in zoom-in ... " > Button C </ button >
< button class =" animate-in slide-in-from-top ... " > Button D </ button >
< button class =" animate-in slide-in-from-left ... " > Button E </ button >

Узнайте больше в документации Enter Animation.

Добавление анимации выхода

Чтобы дать элементу анимацию выхода, используйте утилиту animate-out , в сочетании с некоторыми fade-out , spin-out , zoom-out и slide-out-from утилитами.

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out spin-out ... " > Button B </ button >
< button class =" animate-out zoom-out ... " > Button C </ button >
< button class =" animate-out slide-out-from-top ... " > Button D </ button >
< button class =" animate-out slide-out-from-left ... " > Button E </ button >

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

Изменение введите анимацию начало непрозрачности

Установите начальную непрозрачность анимации, используя утилиты fade-in-{amount} .

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in fade-in-25 ... " > Button B </ button >
< button class =" animate-in fade-in-50 ... " > Button C </ button >
< button class =" animate-in fade-in-75 ... " > Button C </ button >

Узнайте больше в документации «Enter Animation непрозрачность».

Изменение начала анимации вращения анимации

Установите начальное вращение анимации, используя утилиты spin-in-{amount} .

 < button class =" animate-in spin-in-1 ... " > Button A </ button >
< button class =" animate-in spin-in-6 ... " > Button B </ button >
< button class =" animate-in spin-in-75 ... " > Button C </ button >
< button class =" animate-in spin-in-90 ... " > Button C </ button >

Узнайте больше в документировании Antive Animation.

Изменение шкалы начала анимации ввода

Установите исходную шкалу анимации, используя утилиты zoom-in-{amount} .

 < button class =" animate-in zoom-in ... " > Button A </ button >
< button class =" animate-in zoom-in-50 ... " > Button B </ button >
< button class =" animate-in zoom-in-75 ... " > Button C </ button >
< button class =" animate-in zoom-in-95 ... " > Button C </ button >

Узнайте больше в документации по шкале анимации ввода.

Изменение ввода анимационной анимации переводит перевод

Установите начальный перевод анимации, используя утилиты slide-in-from-{direction}-{amount}

 < button class =" animate-in slide-in-from-top ... " > Button A </ button >
< button class =" animate-in slide-in-from-bottom-48 ... " > Button B </ button >
< button class =" animate-in slide-in-from-left-72 ... " > Button C </ button >
< button class =" animate-in slide-in-from-right-96 ... " > Button C </ button >

Узнайте больше в документации «Ввод анимации».

Изменение анимации выхода заканчивает непрозрачность

Установите конечную непрозрачность анимации, используя утилиты fade-out-{amount} .

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out fade-out-25 ... " > Button B </ button >
< button class =" animate-out fade-out-50 ... " > Button C </ button >
< button class =" animate-out fade-out-75 ... " > Button C </ button >

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

Изменение ротации анимации выхода

Установите окончательное вращение анимации, используя утилиты spin-out-{amount} .

 < button class =" animate-out spin-out-1 ... " > Button A </ button >
< button class =" animate-out spin-out-6 ... " > Button B </ button >
< button class =" animate-out spin-out-75 ... " > Button C </ button >
< button class =" animate-out spin-out-90 ... " > Button C </ button >

Узнайте больше в документации по oxit animation.

Изменение шкалы окончания анимации выхода

Установите шкалу окончания анимации, используя утилиты zoom-out-{amount} .

 < button class =" animate-out zoom-out ... " > Button A </ button >
< button class =" animate-out zoom-out-50 ... " > Button B </ button >
< button class =" animate-out zoom-out-75 ... " > Button C </ button >
< button class =" animate-out zoom-out-95 ... " > Button C </ button >

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

Изменение окончания анимации выхода

Установите окончательный перевод анимации, используя утилиты slide-out-to-{direction}-{amount} .

 < button class =" animate-out slide-out-to-top ... " > Button A </ button >
< button class =" animate-out slide-out-to-bottom-48 ... " > Button B </ button >
< button class =" animate-out slide-out-to-left-72 ... " > Button C </ button >
< button class =" animate-out slide-out-to-right-96 ... " > Button C </ button >

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