tailwindcss motion
0.3.0-beta
Tailwindcss-motion — это CSS-плагин Tailwind, созданный в RomboHQ. Это простая, но мощная библиотека анимации с простым синтаксисом.
Движение, без волнения.
1. Установите пакет npm.
npm i -D tailwindcss-motion2. Добавьте в свой 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-fademotion-preset-slide-rightmotion-preset-slide-leftmotion-preset-slide-upmotion-preset-slide-downmotion-preset-focusmotion-preset-blur-rightmotion-preset-blur-leftmotion-preset-blur-upmotion-preset-blur-downmotion-preset-bouncemotion-preset-expandmotion-preset-shrinkmotion-preset-popmotion-preset-compressmotion-preset-shakemotion-preset-wigglemotion-preset-confettimotion-preset-typewriter-[number of characters]motion-preset-flomojiВы можете дополнительно настроить пресеты, используя базовые классы анимации и модификаторов.
Например:
motion-preset-fade : < div class =" motion-preset-fade motion-delay-500 " > </ div >motion-preset-slide-right : < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >motion-preset-bounce : < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > Помимо пресетов, вы можете создавать свои собственные анимации, комбинируя эти базовые классы:
motion-opacity-in-0motion-translate-y-in-100-motion-translate-y-in-100motion-scale-in-75motion-rotate-in-180-motion-rotate-in-90motion-blur-in-smmotion-grayscale-inmotion-bg-in-red-500motion-text-in-blue-500Вы можете объединить несколько анимаций в одном элементе:
< div
class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div > Для анимации выхода просто замените in на out в имени класса.
Вы можете настроить продолжительность, задержку и функцию синхронизации любой анимации.
motion-duration-500motion-delay-500motion-timing-spring-bouncyНапример:
< div
class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >Это применяет продолжительность 2000 мс как к анимации вращения, так и к анимации непрозрачности.
Вы можете применить модификаторы к определенным свойствам, используя косую черту / .
Например:
< div
class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >Здесь задержка в 500 мс применяется только к вращению, а не к непрозрачности.
Плагин включает в себя настраиваемые функции синхронизации:
несколько примеров:
motion-ease-spring-smoothmotion-ease-spring-snappymotion-ease-spring-bouncymotion-ease-spring-bounciestmotion-ease-bouncemotion-ease-bouncemotion-ease-in-quartЦелевая страница - https://play.tailwindcss.com/uAuVF8F1vC
Диалог чата - https://play.tailwindcss.com/gjGqEKswjQ
Динамический остров с низким зарядом батареи — https://play.tailwindcss.com/tvYFbHtNNQ
Образцы цветов Apple — https://play.tailwindcss.com/cvQ3Nk3v8j
Rombo — молодая компания, создающая инструменты, помогающие компаниям создавать красивые интерактивные интерфейсы. Мы начинаем с набора инструментов для инженеров, дизайнеров и креативных маркетологов, позволяющих анимировать стандартные рабочие процессы, такие как Tailwind, Figma, Webflow, Shopify и многие другие! Подпишитесь на обновления на нашем сайте https://rombo.co.
