CSS движение попутного ветра

✨ попутный ветерcss-движение β ✨

Tailwindcss-motion — это CSS-плагин Tailwind, созданный в RomboHQ. Это простая, но мощная библиотека анимации с простым синтаксисом.

Движение, без волнения.

⚒️ Установка

1. Установите пакет npm.

npm i -D tailwindcss-motion

2. Добавьте в свой Tailwind.config.js

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

или, чтобы использовать ESM:

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

Как это работает?

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

Например, для эффекта скольжения и затухания вам просто нужен motion-translate-x-in-25 motion-opacity-in-0 или вы можете использовать один из наших пресетов с motion-preset-fade

Предварительные настройки движения

Мы предоставляем коллекцию пресетов для простой анимации ваших компонентов:

• Затухание : motion-preset-fade
• Слайд :
  • Вправо: motion-preset-slide-right
  • Слева: motion-preset-slide-left
  • Вверх: motion-preset-slide-up
  • Вниз: motion-preset-slide-down
• Фокус : motion-preset-focus
• Размытие :
  • Справа: motion-preset-blur-right
  • Слева: motion-preset-blur-left
  • Вверх: motion-preset-blur-up
  • Вниз: motion-preset-blur-down
• Bounce : motion-preset-bounce
• Развернуть : motion-preset-expand
• Сжать : motion-preset-shrink
• Pop : motion-preset-pop
• Сжатие : motion-preset-compress
• Встряхивание : motion-preset-shake
• Покачивание : motion-preset-wiggle
• Конфетти : motion-preset-confetti
• Пишущая машинка : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

Настройка пресетов

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

Например:

• Добавьте задержку в motion-preset-fade :

">

 < div class =" motion-preset-fade motion-delay-500 " >  div >