Section courante

A propos

Section administrative du site

animation

 Animation
Tailwind CSS

Classe

animation

Description

Cet utilitaire applique une animation complète basée sur des images clefs, permettant des effets dynamiques continus ou ponctuels.

Définition

Classe Styles
animate-spin animation: var(--animate-spin); /* rotation 1s linéaire infini */

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}
animate-ping animation: var(--animate-ping); /* bondir 1s cubic-bezier(0, 0, 0.2, 1) infini */
@keyframes ping {
   75%, 100% {
      transform: scale(2);
      opacity: 0;
   }
}
animate-pulse animation: var(--animate-pulse); /* impulsion 2s cubique-bézier(0,4, 0, 0,6, 1) infini */
@keyframes pulse {
   50% {
      opacity: 0.5;
   }
}
animate-bounce animation: var(--animate-bounce); /* rebond 1s infini */
@keyframes bounce {
   0%, 100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
   50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
}
animate-none animation: none;
animate-(<propriete-personnalisee>) animation: var(<propriete-personnalisee>);
animate-[<valeur>] animation: <valeur>;


Dernière mise à jour : Vendredi, le 6 février 2026