Les transitions courtes rendent une interface réactive. Une entrée de dialogue peut être un peu plus expressive ; une fermeture doit libérer rapidement l’action. Les durées sont des plafonds de départ, pas une obligation d’animer chaque propriété.
Activer une ligne pour observer sa durée. Le mouvement réduit conserve le changement d’état sans translation.
| Token | Durée | Usage |
|---|---|---|
| instant | 0 ms | Mouvement réduit et bascule sans transition. |
| fast | 120 ms | Hover, retour de pression et icône. |
| standard | 180 ms | Sélection, état de champ et petit panneau. |
| expressive | 280 ms | Entrée de dialogue et changement de contexte. |
| slow | 420 ms | Illustration ponctuelle de présentation. |
Utiliser une courbe commune douce pour les changements ordinaires. Le mouvement décrit une relation : l’objet entre depuis sa source, une surface se déploie sans faire perdre le point d’attention.
- Limiter les déplacements d’un composant à 4–16 px dans les transitions usuelles.
- Privilégier
transformetopacitylorsqu’une animation est utile. - Éviter les ressorts qui oscillent sur une action utilitaire.
- Ne pas déplacer un bouton au moment où une personne tente de l’activer.
:root {
--orbit-ease: cubic-bezier(.2, 0, 0, 1);
}
.control { transition: background-color 120ms var(--orbit-ease); }
.panel { animation: enter 280ms var(--orbit-ease); }Le choix système prefers-reduced-motion est respecté. Un décor autonome dispose d’une commande Pause. Un changement de thème n’entraîne pas de flash lumineux ni d’animation longue.
- En mouvement réduit, retirer les trajectoires, rotations et parallaxes ; conserver un état final clair.
- Mettre en pause les animations hors écran ou lorsque l’onglet n’est plus visible.
- Ne pas faire clignoter un état pour attirer artificiellement l’attention.
- Une animation de chargement n’est pas une preuve de progression mesurée.
- Un visuel animé de plus de cinq secondes doit pouvoir être arrêté lorsque le critère applicable le requiert.
@media (prefers-reduced-motion: reduce) {
.orbit-decor { animation: none; }
.panel { animation: none; transition: none; }
html { scroll-behavior: auto; }
}Le point, le filet, l’arc incomplet et le nuage de points constituent la matière orbit. Ils sont fins, espacés et organisés. Ils ne représentent pas nécessairement l’espace ou une planète.
- Un seul motif principal par composition.
- Maintenir une zone calme derrière le texte et la signature.
- Le motif peut sortir du cadre, pas la commande ni l’information.
- Éviter l’accumulation de néons, halos, étoiles, grilles et bruit numérique.
- Une version statique reste disponible pour le papier, le mouvement réduit et les performances limitées.