tailwindcss motion

✨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
  • 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 >

• Passen Sie die Dauer von motion-preset-slide-right :

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• Erhöhen Sie die Höhe von motion-preset-bounce :

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

Basisanimationen

Abgesehen von Voreinstellungen können Sie Ihre eigenen benutzerdefinierten Animationen erstellen, indem Sie diese Basisklassen kombinieren:

• Einblenden : motion-opacity-in-0
• Einschieben :
  • Von unten: motion-translate-y-in-100
  • Von oben: -motion-translate-y-in-100
• Skalierung : motion-scale-in-75
• Eindrehen :
  • Ab 180 Grad: motion-rotate-in-180
  • Von -90 Grad: -motion-rotate-in-90
• Blur In : motion-blur-in-sm
• Grayscale In : motion-grayscale-in
• Änderung der Hintergrundfarbe : motion-bg-in-red-500
• Änderung der Textfarbe : motion-text-in-blue-500

Animationen kombinieren

Sie können mehrere Animationen auf einem einzelnen Element kombinieren:

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

Exit-Animationen

Für Exit-Animationen ersetzen Sie im Klassennamen einfach in “ durch out .

Modifikatoren

Sie können die Dauer, Verzögerung und Timing-Funktion jeder Animation anpassen.

• Dauer : motion-duration-500
• Verzögerung : motion-delay-500
• Timing-Funktion : motion-timing-spring-bouncy

Zum Beispiel:

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Dies gilt für eine Dauer von 2000 ms sowohl für die Rotations- als auch für die Deckkraftanimationen.

Modifikatoren für jede Eigenschaft

Mit einem Schrägstrich / können Sie Modifikatoren auf bestimmte Eigenschaften anwenden.

Zum Beispiel:

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Hier wird die Verzögerung von 500 ms nur auf die Drehung angewendet, nicht auf die Deckkraft.

Ease-Funktionen

Das Plugin enthält benutzerdefinierte Timing-Funktionen:

ein paar Beispiele sind:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

Beispiele

Landingpage – https://play.tailwindcss.com/uAuVF8F1vC

Chat-Dialog – https://play.tailwindcss.com/gjGqEKswjQ

Dynamische Insel mit niedrigem Batteriestand – https://play.tailwindcss.com/tvYFbHtNNQ

Apple-Farbfelder – https://play.tailwindcss.com/cvQ3Nk3v8j

Was ist Rombo?

Rombo ist ein junges Unternehmen, das Tools entwickelt, die Unternehmen dabei helfen, schöne interaktive Schnittstellen zu erstellen. Wir beginnen mit einem Toolkit für Ingenieure, Designer und kreative Vermarkter, um nativ in gängigen Workflows zu animieren – wie Tailwind, Figma, Webflow, Shopify und mehr! Melden Sie sich für Updates auf unserer Website unter https://rombo.co an