Motion
Tokens d'animation et transitions. Les mouvements sont subtils et fonctionnels : ils guident l'attention sans distraire.
Durees
Deux paliers de duree selon le type d'interaction.
| Token | Duree | Usage |
|---|---|---|
duration-[120ms] | 120ms | Hover states, toggle, micro-interactions |
duration-[250ms] | 250ms | Transitions d'elements, fade, slide |
duration-[350ms] | 350ms | Transitions de page, modales, grandes animations |
Courbes d'acceleration
Easing functions utilisees pour les entrees et sorties.
| Easing | Classe | Usage |
|---|---|---|
ease-out | ease-out | Entrees, apparitions (deceleration naturelle) |
ease-in | ease-in | Sorties, disparitions (acceleration vers la fin) |
ease-in-out | ease-in-out | Animations continues (float, gradient) |
Exemples interactifs
Survolez et cliquez pour tester les animations en direct.
Hover Lift
Elevation au survol, 250ms ease-out. Utilisee sur les cartes et boutons.
Hover me
Hover me
Fade In Up
Apparition avec deplacement, 350ms ease-out. Pour le contenu charge.
Float
Flottement continu, 3s ease-in-out infinite. Pour les illustrations.
Gradient X
Animation de gradient horizontal, 3s ease-in-out. Pour les accents visuels.
Shimmer
Effet de chargement skeleton, 2s ease-in-out. Pour les placeholders.
Hover States
Micro-interactions boutons, 120ms. Scale + brightness au hover, press effect au click.
Bonnes pratiques
A faire
- Utiliser ease-out pour les entrees, ease-in pour les sorties
- Garder les micro-interactions sous 120ms
- Ajouter des transitions sur transform et opacity (GPU-accelere)
- Respecter prefers-reduced-motion
A eviter
- Animer width/height (provoque des reflows)
- Depasser 350ms pour les transitions UI
- Utiliser des bounces ou des springs excessifs
- Animer des elements non visibles a l'ecran