Mouvement
Des transitions qui aident à comprendre.
En pratique
Rapide
120 msRetours d’état et micro-interactions.
Standard
240 msApparition d’un élément et transitions courantes.
Progressive
400 msTransitions entre des vues ou compositions complexes.
Courbe d’accélération : cubic-bezier(0.2, 0, 0, 1)
Bonnes pratiques
Le mouvement explique un changement d’état, indique une relation ou confirme une action. Il accompagne l’expérience sans retarder l’accès au contenu.
- Utilisez une durée adaptée à l’ampleur de la transition.
- Évitez les animations répétitives qui détournent l’attention.
- Respectez la préférence système de réduction des mouvements.
- Rendez l’information compréhensible même en l’absence d’animation.
À retenir
Une transition utile répond à une question : qu’est-ce qui a changé et quel est le lien entre les deux états ?