Rückenwindbewegung

✨Rückenwindcss-Bewegung β✨

tailwindcss-motion ist ein Tailwind-CSS-Plugin, das bei RomboHQ erstellt wurde. Es handelt sich um eine einfache, aber leistungsstarke Animationsbibliothek mit einfacher Syntax.

Bewegung, ohne Aufregung.

⚒️ Installation

1. Installieren Sie das NPM-Paket

npm i -D tailwindcss-motion

2. Fügen Sie es in Ihre tailwind.config.js ein

 // tailwind.config.js

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

oder, um ESM zu verwenden:

 import tailwindcssMotion from "tailwindcss-motion" ;

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

Wie funktioniert es?

Wir bieten eine einfache Syntax zum Animieren jedes Elements in Ihrem Tailwind-Projekt. Anstatt benutzerdefinierte Keyframes zu definieren, stellen wir Utility-Klassen zur Inline-Animation jeder Dimension bereit.

Für einen Slide-and-Fade-Effekt benötigen Sie beispielsweise einfach motion-translate-x-in-25 motion-opacity-in-0 oder Sie können eine unserer Voreinstellungen mit motion-preset-fade verwenden

Bewegungsvoreinstellungen

Wir stellen eine Sammlung von Voreinstellungen zur Verfügung, mit denen Sie Ihre Komponenten einfach animieren können:

• Fade : motion-preset-fade
• Gleiten :
  • Rechts: motion-preset-slide-right
  • Links: motion-preset-slide-left Left
  • Nach oben: motion-preset-slide-up
  • Nach unten: motion-preset-slide-down
• Fokus : motion-preset-focus
• Unschärfe :
  • Rechts: motion-preset-blur-right
  • Links: motion-preset-blur-left
  • Oben: motion-preset-blur-up
  • Nach unten: motion-preset-blur-down
• Bounce : motion-preset-bounce
• Erweitern : motion-preset-expand
• Schrumpfen : motion-preset-shrink
• Pop : motion-preset-pop
• Komprimieren : motion-preset-compress
• Shake : motion-preset-shake
• Wackeln : motion-preset-wiggle
• Konfetti : motion-preset-confetti
• Schreibmaschine : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

Anpassen von Voreinstellungen

Sie können Voreinstellungen mithilfe von Basisanimationen und Modifikatorklassen weiter anpassen.

Zum Beispiel:

• Fügen Sie motion-preset-fade eine Verzögerung hinzu:

">

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