Fondations

Mouvement

stableClasses hb-list-row--new hb-toast-enter hb-skeleton-pulse

Tokens

Token	Valeur	Usage
`--duration-press`	120 ms	enfoncement d'un bouton, d'une touche, d'une case
`--duration-state`	180 ms	changement d'état : fond, couleur, filet, survol, focus
`--duration-tooltip`	150 ms	infobulle
`--duration-menu`	220 ms	menu, toast, accordéon, coche, apparition d'une ligne
`--duration-drawer`	360 ms	panneau latéral, dialogue
`--ease-out`	sortie rapide	état, enfoncement, focus
`--ease-spring`	ressort léger, 7 % de dépassement	ce qui confirme : coche, radio, interrupteur, menu, dialogue, toast
`--ease-move`	symétrique	déplacement, barre indéterminée, balayage
`--ease-drawer`	longue décélération	panneau latéral

En JavaScript, Hublot.motion donne les mêmes valeurs pour une <transition> Vue ou l'API Web Animations. Le ressort est une courbe linear() : Safari iOS 17.2 et plus, Chrome 113 et plus ; ailleurs la transition se fait en ease, sans casse.

Ce qui bouge, et pourquoi

Moment	Mouvement	Ce qu'il dit
appui sur un bouton, une touche	`scale(.97)` en 120 ms	« c'est pris » sous le doigt
case cochée, radio choisi	la coche apparaît avec un léger rebond	l'état a changé
interrupteur	la pastille glisse avec un rebond et s'étire sous le doigt	comme sur iOS : on sent le basculement
focus clavier	l'anneau se resserre sur le contrôle	où est le focus maintenant
menu, dialogue	apparaît de 4 px plus haut, de 97 % à 100 %	d'où il vient, sans masquer d'un coup
toast	monte du bas avec un rebond	une confirmation est arrivée
ligne ajoutée (`hb-list-row--new`, `is-new`)	éclat métier et barre à gauche qui s'éteignent en 1,6 s	où est ce qu'on vient d'ajouter
chargement	balayage lumineux sur le squelette, anneau qui tourne	ça avance
changement de thème	fondu enchaîné de toute la page (`Hublot.setMode`)	rien n'a sauté

Code

<div class="hb-row" style="gap:var(--space-5)">
  <button class="hb-btn hb-btn-primary">Appuyer</button>
  <label class="hb-check-label"><input type="checkbox" class="hb-check"> Cocher</label>
  <label class="hb-check-label"><input type="radio" class="hb-radio" name="mv"> Choisir</label>
  <label class="hb-check-label"><input type="checkbox" class="hb-switch"> Basculer</label>
</div>
<div class="hb-list" style="max-width:560px">
  <div class="hb-list-row"><span class="hb-list-handle"></span><input type="checkbox" class="hb-check hb-list-check" aria-label="Faite"><div class="hb-list-body"><span class="hb-list-title">Vérifier les DLC du libre-service</span></div></div>
  <div class="hb-list-row hb-list-row--new"><span class="hb-list-handle"></span><input type="checkbox" class="hb-check hb-list-check" aria-label="Faite"><div class="hb-list-body"><span class="hb-list-title">Tâche qui vient d'être ajoutée</span></div></div>
</div>
<div class="hb-card hb-card-body hb-skeleton-pulse" style="max-width:420px"><span class="hb-skeleton hb-skeleton--text" style="width:50%"></span><span class="hb-skeleton"></span><span class="hb-skeleton hb-skeleton--block" style="margin-top:var(--space-3)"></span></div>

Règles

Une animation répond à une action ou montre une attente. Aucune entrée animée de section, aucun survol qui fait bouger une carte.
transform et opacity seulement pour ce qui se déplace ; les couleurs et filets changent en --duration-state. Jamais d'animation de height, width ou top : saccades sur les tablettes d'entrée de gamme.
Le rebond reste léger et court ; il n'est jamais posé sur un déplacement long (panneau latéral, page).
prefers-reduced-motion ramène tout à un fondu court ; seul l'anneau de chargement continue, parce qu'il porte une information.