tailwindcss-animateUn complemento CSS de viento de cola para crear hermosas animaciones.
<!-- 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! --> Instale el complemento de NPM:
npm install -D tailwindcss-animate Luego agregue el complemento a su archivo tailwind.config.js :
// @filename tailwind.config.js
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( "tailwindcss-animate" ) ,
// ...
] ,
} Use las utilidades delay-{amount} para controlar animation-delay de un elemento.
< 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 >Obtenga más información en la documentación de retraso de animación.
Utilice la direction-{keyword} Utilidades para controlar animation-delay de un elemento.
< 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 >Obtenga más información en la documentación de la dirección de animación.
Use la duration-{amount} Utilidades para controlar animation-duration de un elemento.
< 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 >Obtenga más información en la documentación de duración de la animación.
Utilice las utilidades fill-mode-{keyword} para controlar animation-fill-mode de un elemento.
< 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 >Obtenga más información en la documentación del modo de relleno de animación.
Use las utilidades repeat-{amount} para controlar animation-iteration-count de un elemento.
< 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 >Obtenga más información en la documentación del recuento de iteraciones de animación.
Use las utilidades running y paused para controlar animation-play-state de un elemento.
< button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >Obtenga más información en la documentación estatal de juego de animación.
Use las utilidades ease-{keyword} para controlar animation-timing-function de un elemento.
< 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 >Obtenga más información en la documentación de la función de tiempo de animación.
Para situaciones en las que el usuario ha especificado que prefiere un movimiento reducido, puede aplicar condicionalmente animaciones y transiciones utilizando las variantes motion-safe y motion-reduce :
< button class =" motion-safe:animate-bounce ... " > Button B </ button > Para darle a un elemento una animación Enter, use la utilidad animate-in , en combinación con algunos utilidades fade-in , spin-in , zoom-in y slide-in-from .
< 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 >Obtenga más información en la documentación Ingrese de animación.
Para darle a un elemento una animación de salida, use la utilidad animate-out , en combinación con algunas utilidades fade-out , spin-out , zoom-out y 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 >Obtenga más información en la documentación de animación de salida.
Establezca la opacidad de inicio de una animación utilizando las utilidades fade-in-{amount} .
< 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 >Obtenga más información en la documentación de opacidad Ingrese de animación.
Establezca la rotación inicial de una animación utilizando las utilidades spin-in-{amount} .
< 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 >Obtenga más información en la documentación de rotación de animación Intro.
Establezca la escala inicial de una animación utilizando las utilidades zoom-in-{amount} .
< 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 >Obtenga más información en la documentación de la escala de animación Ingrese.
Establezca la traducción inicial de una animación utilizando la slide-in-from-{direction}-{amount} utilidades.
< 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 >Obtenga más información en la documentación Ingrese de traducción de animación.
Establezca la opacidad final de una animación utilizando las utilidades fade-out-{amount} .
< 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 >Obtenga más información en la documentación de opacidad de animación de salida.
Establezca la rotación final de una animación utilizando las utilidades spin-out-{amount} .
< 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 >Obtenga más información en la documentación de Rotate de animación de salida.
Establezca la escala final de una animación utilizando las utilidades zoom-out-{amount} .
< 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 >Obtenga más información en la documentación de la escala de animación de salida.
Establezca la traducción final de una animación utilizando el 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 >Obtenga más información en la animación de salida traducir la documentación.
