Aller au contenu

Motion

Le système de motion TDS est fonctionnel, jamais décoratif. Les animations doivent guider l’utilisateur, pas le distraire.

Durées

Token	Variable CSS	Valeur	Usage
`instant`	`--tds-motion-instant`	`0ms`	Reset instantané, suppression d’animation
`fast`	`--tds-motion-fast`	`120ms`	Hover/focus, micro-interactions
`normal`	`--tds-motion-normal`	`200ms`	Dropdowns, modales, transitions d’état
`slow`	`--tds-motion-slow`	`320ms`	Panels, toasts, ouvertures
`verySlow`	`--tds-motion-very-slow`	`500ms`	Changements documentaires, page overlays

Courbes d’easing

Token	Variable CSS	Valeur	Usage
`standard`	`--tds-easing-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`	Transitions générales
`enter`	`--tds-easing-enter`	`cubic-bezier(0.3, 0, 0.15, 1)`	Entrées d’éléments
`exit`	`--tds-easing-exit`	`cubic-bezier(0.4, 0, 1, 1)`	Sorties d’éléments
`linear`	`--tds-easing-linear`	`linear`	Loaders, barres de progression

Combinaisons recommandées

Composant	Durée	Easing
Bouton (hover/focus)	`fast` (120ms)	`standard`
Dropdown (ouverture)	`normal` (200ms)	`enter`
Dropdown (fermeture)	`normal` (200ms)	`exit`
Modale (ouverture)	`slow` (320ms)	`enter`
Modale (fermeture)	`normal` (200ms)	`exit`
Toast (apparition)	`slow` (320ms)	`enter`
Tooltip	`fast` (120ms)	`enter`
Navigation / page	`normal` (200ms)	`standard`

Accessibilité — `prefers-reduced-motion`

/* Pattern obligatoire pour toute transition TDS */
.mon-composant {
  transition:
    background-color var(--tds-motion-fast) var(--tds-easing-standard),
    border-color var(--tds-motion-fast) var(--tds-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  .mon-composant {
    transition: none;
  }
}

/* Version utilitaire globale — à inclure dans le reset CSS */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Variables CSS

--tds-motion-instant:   0ms;
--tds-motion-fast:      120ms;
--tds-motion-normal:    200ms;
--tds-motion-slow:      320ms;
--tds-motion-very-slow: 500ms;

--tds-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
--tds-easing-enter:    cubic-bezier(0.3, 0, 0.15, 1);
--tds-easing-exit:     cubic-bezier(0.4, 0, 1, 1);
--tds-easing-linear:   linear;