tailwindcss-animateUn plugin CSS à vent arrière pour créer de belles animations.
<!-- 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! --> Installez le plugin à partir de NPM:
npm install -D tailwindcss-animate Ajoutez ensuite le plugin à votre fichier tailwind.config.js :
// @filename tailwind.config.js
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( "tailwindcss-animate" ) ,
// ...
] ,
} Utilisez les utilitaires delay-{amount} pour contrôler animation-delay d'un élément.
< 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 >En savoir plus dans la documentation du retard d'animation.
Utilisez les utilitaires direction-{keyword} pour contrôler animation-delay d'un élément.
< 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 >En savoir plus dans la documentation de la direction d'animation.
Utilisez les utilitaires duration-{amount} pour contrôler animation-duration d'un élément.
< 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 >En savoir plus dans la documentation de la durée d'animation.
Utilisez les utilitaires fill-mode-{keyword} pour contrôler animation-fill-mode d'un élément.
< 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 >En savoir plus dans la documentation du mode de remplissage d'animation.
Utilisez les utilitaires repeat-{amount} pour contrôler animation-iteration-count d'un élément.
< 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 >En savoir plus dans la documentation du nombre d'itération d'animation.
Utilisez les utilitaires running et paused pour contrôler animation-play-state d'un élément.
< button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >En savoir plus dans la documentation de l'état de jeu d'animation.
Utilisez les utilitaires ease-{keyword} pour contrôler animation-timing-function d'un élément.
< 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 >En savoir plus dans la documentation de la fonction de synchronisation d'animation.
Pour les situations où l'utilisateur a spécifié qu'ils préfèrent un mouvement réduit, vous pouvez appliquer conditionnellement des animations et des transitions en utilisant les variantes motion-safe et motion-reduce :
< button class =" motion-safe:animate-bounce ... " > Button B </ button > Pour donner à un élément une animation ENTER, utilisez l'utilitaire animate-in , en combinaison avec des utilitaires fade-in , spin-in , zoom-in et 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 >En savoir plus dans la documentation de l'animation ENTER.
Pour donner à un élément une animation de sortie, utilisez l'utilitaire animate-out , en combinaison avec des utilitaires fade-out , spin-out , zoom-out et 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 >En savoir plus dans la documentation d'animation de sortie.
Définissez l'opacité de démarrage d'une animation à l'aide des utilitaires 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 >En savoir plus dans la documentation Entrée d'animation Opacité.
Définissez la rotation de démarrage d'une animation à l'aide des utilitaires 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 >En savoir plus dans la documentation en entrée d'animation.
Définissez l'échelle de départ d'une animation à l'aide des utilitaires 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 >En savoir plus dans la documentation de l'échelle d'animation Entrée.
Définissez la traduction de démarrage d'une animation à l'aide des utilitaires slide-in-from-{direction}-{amount} .
< 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 >En savoir plus dans la documentation de traduisage de l'animation enter.
Définissez l'opacité de fin d'une animation à l'aide des utilitaires 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 >En savoir plus dans la documentation de l'opacité de l'animation de sortie.
Définissez la rotation de fin d'une animation à l'aide des utilitaires 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 >En savoir plus dans la documentation de rotation d'animation de sortie.
Définissez l'échelle de fin d'une animation à l'aide des utilitaires 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 >En savoir plus dans la documentation de l'échelle d'animation de sortie.
Définissez la fin de la fin d'une animation à l'aide des utilitaires 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 >En savoir plus dans l'animation de sortie traduire la documentation.
