tailwindcss animate

tailwindcss-animate

Ein Rückenwind -CSS -Plugin zum Erstellen wunderschöner Animationen.

 <!-- 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! --> 

Installation

Installieren Sie das Plugin von NPM:

npm install -D tailwindcss-animate

Fügen Sie dann das Plugin zu Ihrer Datei tailwind.config.js hinzu:

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

Dokumentation

• Grundnutzung
  • Änderung der Animationsverzögerung
  • Animationsrichtung ändern
  • Änderung der Animationsdauer
  • Animationsfüllmodus ändern
  • Animations -Iterationszahl ändern
  • Änderung der Animation Spielstatus
  • Ändern der Animations -Timing -Funktion
  • Bevorzugt eine reduzierte Bewegung
• Geben Sie Animationen ein und beenden Sie an
  • Hinzufügen von Eingabetimationen
  • Hinzufügen von Exit -Animationen
  • Ändern der Eingabetimation Starten der Deckkraft
  • Ändern der Eingabetanimation Startrotation
  • Ändern der Eingabet -Animation Startskala
  • Ändern der Eingabetanimation Starten Übersetzen
  • Änderung der Ausgangsanimation Beendigung der Deckkraft
  • Änderung der Ausgangsanimation Ending Rotation
  • Änderung der Beendungsskala zur Beenden Animation
  • Ändern der Ausgangsanimationende Übersetzen

Grundnutzung

Änderung der Animationsverzögerung

Verwenden Sie die delay-{amount} um das animation-delay eines Elements zu steuern.

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

Erfahren Sie mehr in der Animationsverzögerungsdokumentation.

Animationsrichtung ändern

Verwenden Sie die direction-{keyword} -Vergabedienstprogramme, um das animation-delay eines Elements zu steuern.

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

Erfahren Sie mehr in der Animationsrichtungsdokumentation.

Änderung der Animationsdauer

Verwenden Sie die Dienstprogramme duration-{amount} um animation-duration eines Elements zu steuern.

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

Erfahren Sie mehr in der Dokumentation der Animationsdauer.

Animationsfüllmodus ändern

Verwenden Sie die Dienstprogramme fill-mode-{keyword} ​​um animation-fill-mode eines Elements zu steuern.

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

Erfahren Sie mehr in der Dokumentation der Animations -Füllmodus.

Animations -Iterationszahl ändern

Verwenden Sie die repeat-{amount} Dienstprogramme, um die animation-iteration-count eines Elements zu steuern.

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

Erfahren Sie mehr in der Dokumentation der Animation Iteration Count.

Änderung der Animation Spielstatus

Verwenden Sie die running und paused Dienstprogramme, um den animation-play-state eines Elements zu steuern.

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

Erfahren Sie mehr in der Animation State Dokumentation.

Ändern der Animations -Timing -Funktion

Verwenden Sie die ease-{keyword} -Unstriche, um animation-timing-function eines Elements zu steuern.

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

Erfahren Sie mehr in der Dokumentation der Animations -Timing -Funktion.

Bevorzugt eine reduzierte Bewegung

In Situationen, in denen der Benutzer angegeben hat, dass er eine reduzierte Bewegung bevorzugt, können Sie Animationen und Übergänge unter Verwendung der motion-safe und motion-reduce -Varianten bedingt anwenden:

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

Geben Sie Animationen ein und beenden Sie an

Hinzufügen von Eingabetimationen

Verwenden Sie das animate-in -Dienstprogramm in Kombination mit zoom-in fade-in ein spin-in um einem Element eine Eingabemanimation slide-in-from verleihen.

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

Erfahren Sie mehr in der Dokumentation der Animation eingeben.

Hinzufügen von Exit -Animationen

Um einem Element eine Exit-Animation zu verleihen, verwenden Sie das animate-out -Dienstprogramm in Kombination mit einigen Versorgungsunternehmen fade-out , spin-out , zoom-out und 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 >

Erfahren Sie mehr in der Dokumentation der Exit -Animation.

Ändern der Eingabetimation Starten der Deckkraft

Legen Sie die Startkazität einer Animation mit den Dienstprogrammen für fade-in-{amount} fest.

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

Erfahren Sie mehr in der Dokumentation der Opazität der Eingabetaste.

Ändern der Eingabetanimation Startrotation

Stellen Sie die Startrotation einer Animation mit den spin-in-{amount} -Vergabediensten fest.

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

Erfahren Sie mehr in der Dokumentation der Animation -Drehung.

Ändern der Eingabet -Animation Startskala

Legen Sie die Startskala einer Animation mit den zoom-in-{amount} -Vergabediensten fest.

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

Erfahren Sie mehr in der Dokumentation der Animationsskala eingeben.

Ändern der Eingabetanimation Starten Übersetzen

Legen Sie die Startübersetzung einer Animation mit den Dienstprogrammen für slide-in-from-{direction}-{amount} fest.

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

Erfahren Sie mehr in der Übersetzungsdokumentation eingeben.

Änderung der Ausgangsanimation Beendigung der Deckkraft

Legen Sie die endgültige Deckkraft einer Animation mit den Dienstprogrammen für fade-out-{amount} fest.

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

Erfahren Sie mehr in der Dokumentation der Opazität der Exit -Animation.

Änderung der Ausgangsanimation Ending Rotation

Legen Sie die Enddrehung einer Animation mithilfe der spin-out-{amount} -Utilder fest.

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

Erfahren Sie mehr in der Drehdokumentation der Exit -Animation.

Änderung der Beendungsskala zur Beenden Animation

Legen Sie die Endskala einer Animation mit den Dienstprogrammen zoom-out-{amount} fest.

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

Erfahren Sie mehr in der Dokumentation der Exit -Animationsskala.

Ändern der Ausgangsanimationende Übersetzen

Setzen Sie das Ende einer Animation mit den Dienstprogrammen für die 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 >

Erfahren Sie mehr in der Exit -Animation Übersetzungsdokumentation.