Comment animer un interrupteur à bascule (Toggle Switch) proprement
Guide complet pour animer un commutateur à bascule : déplacement du curseur, transition de couleur de piste, physique de ressorts et accessibilité ARIA.
À retenir
Un commutateur bien conçu déplace le curseur et modifie la couleur de la piste simultanément en réponse à l'interaction. Le curseur doit employer un ressort interruptible ou une transition courte de 150 à 200 ms avec transform: translateX, tandis que la piste ajuste sa couleur d'arrière-plan. Le composant doit exposer role="switch" et aria-checked pour les technologies d'assistance, et respecter prefers-reduced-motion.
Pourquoi les animations d'interrupteurs échouent en production
Les interrupteurs sont activés fréquemment et souvent très rapidement. Les anomalies les plus courantes surviennent lorsqu'une transition CSS fixe est interrompue en plein vol : le curseur saute brutalement à son origine ou se désynchronise. L'utilisation d'une physique de ressort ou de transitions déterministes sur transform évite ces sursauts lorsque l'utilisateur clique deux fois d'affilée.
Déplacement du curseur et remplissage de la piste
Animez le curseur avec transform: translateX() plutôt qu'avec left ou margin-left, car les modifications de transform ne déclenchent aucun recalcul de mise en page ni de repeinte complète. Associez le déplacement à un léger étirement (ex. scaleX(1.1)) lors de la pression pour évoquer l'inertie, en revenant à la normale au relâchement.
- Déplacez le curseur avec transform: translateX(), jamais left
- Faites transiter la couleur de la piste en 150 à 200 ms
- Conservez un curseur circulaire adapté au rayon de la piste
- Maintenez une zone tactile d'au moins 44x44 px sur mobile
Navigation au clavier et états de focus
Ne supprimez jamais l'indicateur de focus d'un interrupteur. Les personnes naviguant au clavier utilisent Tab pour atteindre le composant et la touche Espace pour basculer son état. Veillez à ce que le contour :focus-visible entoure nettement la piste avec un contraste suffisant.
Comportement en mouvement réduit
Lorsque l'utilisateur demande un mouvement réduit via prefers-reduced-motion, rendez le changement de couleur instantané ou très court (50 ms), et déplacez le curseur directement à sa position finale sans oscillation.
Extrait d’implémentation en production
/* Accessible toggle switch */
.switch-track {
width: 48px;
height: 28px;
background-color: #d1d5db;
border-radius: 9999px;
transition: background-color 180ms ease-out;
cursor: pointer;
}
.switch-track[aria-checked="true"] {
background-color: #ff4a1c;
}
.switch-thumb {
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
transform: translateX(3px);
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.switch-track[aria-checked="true"] .switch-thumb {
transform: translateX(23px);
}
@media (prefers-reduced-motion: reduce) {
.switch-track, .switch-thumb {
transition: none;
}
}Principes clés à retenir
- Utilisez transform: translateX() pour préserver les 60 FPS sans reflow
- Limitez l'animation à 200 ms ou employez un ressort amorti
- Préservez un role="switch" accessible avec état aria-checked synchronisé
- Garantissez une cible tactile d'au moins 44x44 px sur écran tactile
Questions fréquentes
Sources
- Switch Pattern — W3C WAI-ARIA Authoring Practices
- CSS Transforms Module Level 1 — W3C