Utilitaires CSS pour appliquer des animations prédéfinies, contrôler leur durée, leur direction
et leur répétition. Les classes .anim-* définissent uniquement
animation-name — elles se combinent avec les modificateurs
de durée et de comportement.
.anim-infinite)
.anim-shake-x.anim-shake-y.anim-rotate.anim-fade-in-out.anim-scale-in
Les classes .anim-* définissent uniquement
animation-name. Sans une durée explicite (ex :
.anim-300), la durée par défaut du navigateur s'applique
(0s) — l'animation ne sera pas visible.
| CLASSE | ANIMATION(S) APPLIQUÉE(S) | DESCRIPTION |
|---|---|---|
.anim-shake-x |
shake-x |
Secousse horizontale décroissante. |
.anim-shake-y |
shake-y |
Secousse verticale décroissante. |
.anim-rotate |
rotate |
Rotation complète de 0° à 360°. |
.anim-fade-in |
fade-in |
Apparition par opacité (0 → 1). |
.anim-fade-out |
fade-out |
Disparition par opacité (1 → 0). |
.anim-fade-in-out |
fade-in-out |
Apparition puis disparition (0 → 1 → 0). |
.anim-fade-out-in |
fade-out-in |
Disparition puis réapparition (1 → 0 → 1). |
.anim-slide-in-top |
fade-in, slide-in-top |
Glissement depuis le haut combiné à un fade-in. |
.anim-slide-in-bottom |
fade-in, slide-in-bottom |
Glissement depuis le bas combiné à un fade-in. |
.anim-slide-in-left |
fade-in, slide-in-left |
Glissement depuis la gauche combiné à un fade-in. |
.anim-slide-in-right |
fade-in, slide-in-right |
Glissement depuis la droite combiné à un fade-in. |
.anim-slide-out-top |
fade-out, slide-out-top |
Glissement vers le haut combiné à un fade-out. |
.anim-slide-out-bottom |
fade-out, slide-out-bottom |
Glissement vers le bas combiné à un fade-out. |
.anim-slide-out-left |
fade-out, slide-out-left |
Glissement vers la gauche combiné à un fade-out. |
.anim-slide-out-right |
fade-out, slide-out-right |
Glissement vers la droite combiné à un fade-out. |
.anim-scale-in |
fade-in, scale-in |
Grossissement depuis 0.7 vers 1 combiné à un fade-in. |
.anim-scale-out |
fade-out, scale-out |
Rétrécissement depuis 1.3 vers 1 combiné à un fade-out. |
.anim-alert-auto |
alert-auto 5s ease forwards |
Animation complète autonome : entrée, maintien 70 % du temps, sortie. Durée fixée à 5s avec forwards. |
.anim-alert-enter |
alert-enter |
Entrée d'alerte : fade-in + glissement depuis -10px. |
.anim-alert-exit |
alert-exit |
Sortie d'alerte : fade-out + glissement vers -10px. |
Les classes de durée s'appliquent sur animation-duration et se combinent avec n'importe quelle classe .anim-*.
| CLASSE | VALEUR |
|---|---|
.anim-0 |
animation-duration: 0ms |
.anim-100 |
animation-duration: 100ms |
.anim-200 |
animation-duration: 200ms |
.anim-300 |
animation-duration: 300ms |
.anim-400 |
animation-duration: 400ms |
.anim-500 |
animation-duration: 500ms |
.anim-600 |
animation-duration: 600ms |
.anim-700 |
animation-duration: 700ms |
.anim-800 |
animation-duration: 800ms |
.anim-900 |
animation-duration: 900ms |
.anim-1000 |
animation-duration: 1000ms |
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.anim-reverse |
animation-direction: reverse |
Joue l'animation en sens inverse. Utile pour transformer un slide-in en slide-out sans classe dédiée. |
.anim-infinite |
animation-iteration-count: infinite |
Répète l'animation indéfiniment. |
| CLASSE | DESCRIPTION |
|---|---|
.no-animation |
Supprime toute animation sur l'élément et ses pseudo-éléments ::before / ::after (!important). |
.no-transition |
Supprime toute transition sur l'élément et ses pseudo-éléments ::before / ::after (!important). |
Toutes les animations sont définies via des @keyframes intégrés au SCSS. Le tableau ci-dessous résume leur comportement.
| NOM | DÉPART | ARRIVÉE |
|---|---|---|
fade-in |
opacity: 0 |
opacity: 1 |
fade-out |
opacity: 1 |
opacity: 0 |
fade-in-out |
opacity: 0 |
50 % : opacity: 1 → opacity: 0 |
fade-out-in |
opacity: 1 |
50 % : opacity: 0 → opacity: 1 |
slide-in-top |
translateY(-66.66%) |
translateY(0) |
slide-in-bottom |
translateY(66.66%) |
translateY(0) |
slide-in-left |
translateX(-66.66%) |
translateX(0) |
slide-in-right |
translateX(66.66%) |
translateX(0) |
slide-out-top |
translateY(0) |
translateY(-66.66%) |
slide-out-bottom |
translateY(0) |
translateY(66.66%) |
slide-out-left |
translateX(0) |
translateX(-66.66%) |
slide-out-right |
translateX(0) |
translateX(66.66%) |
scale-in |
scale(0.7) |
scale(1) |
scale-out |
scale(1.3) |
scale(1) |
shake-x |
Oscillations translateX décroissantes : ±18px → ±16px → … → 0. |
|
shake-y |
Oscillations translateY décroissantes : ±18px → ±16px → … → 0. |
|
rotate |
rotate(0deg) |
rotate(360deg) |
alert-auto |
0 % : entrée (fade + translateY(-10px)) — 10 % → 80 % : visible — 100 % : sortie (fade + translateY(-10px)). Durée fixée à 5s avec forwards. |
|
alert-enter |
opacity: 0, translateY(-10px) |
opacity: 1, translateY(0) |
alert-exit |
opacity: 1, translateY(0) |
opacity: 0, translateY(-10px) |
Les classes .anim-slide-* et .anim-scale-*
appliquent deux animation-name simultanément (ex : fade-in, slide-in-top).
Les deux keyframes s'exécutent en parallèle sur la même durée.
Toujours associer une classe de durée (.anim-300, .anim-500…)
à une classe .anim-*. Sans durée, animation-duration
vaut 0s par défaut et l'animation n'est pas perceptible.
Utiliser .anim-alert-auto pour les notifications autonomes.
Pour un contrôle manuel de l'entrée et de la sortie, préférer
.anim-alert-enter et .anim-alert-exit
avec permutation JS des classes.
.anim-alert-auto est la seule classe qui définit
une animation complète (animation shorthand avec durée, easing et
forwards). Ajouter une classe .anim-{durée}
sur cet élément écrasera la durée de 5s définie dans la classe.
.no-animation et .no-transition
utilisent !important et couvrent les pseudo-éléments
::before / ::after.
Ils écrasent toute animation héritée d'un composant parent.
Animation · WEBDEV-UI DOCS / V1