Transitions CSS vs animations à ressort dans l'UI
Comparez les transitions CSS avec les animations physiques à ressort : durées fixes, gestion des interruptions, héritage de vélocité et performances.
À retenir
Les transitions CSS déploient leur progression sur une durée fixe selon des courbes de Bézier, convenant idéalement aux apparitions simples comme l'estompage d'une info-bulle. Les animations à ressort calculent la position image par image selon la rigidité, l'amortissement et la masse, permettant d'interrompre un geste en plein vol tout en préservant sa vélocité. Utilisez le CSS pour les états prévisibles et les ressorts pour l'UI pilotée par gestes.
Durée fixe vs stabilisation physique
Une transition CSS impose une durée explicite, comme 300 ms. Quelle que soit la distance parcourue ou la vitesse impulsée par l'utilisateur, elle prendra invariablement 300 ms pour s'achever. À l'opposé, une animation à ressort s'arrête naturellement dès que les forces simulées s'épuisent.
Le problème de l'interruption dans les interfaces réelles
La principale limite des transitions CSS apparaît lors d'un changement d'état en cours d'animation. Cliquer deux fois rapidement sur un bouton ou inverser un tiroir en plein glissement provoque un saut brusque. La physique de ressort absorbe l'interruption en réorientant le vecteur de vélocité sans saccade visuelle.
- Les transitions CSS sautent ou bloquent lors d'une interruption
- Les ressorts héritent de la vitesse et réorientent le mouvement avec fluidité
- Les ressorts évitent d'ajuster des durées arbitraires selon la taille d'écran
- Le CSS reste plus économique lorsqu'aucun geste n'est suivi
Performances et exécution hors du thread principal
Les transitions CSS sur transform et opacity tournent hors du thread principal sur le compositeur du navigateur. Les animations à ressort JavaScript s'exécutent sur requestAnimationFrame, à moins d'employer des approximations comme linear() ou des moteurs natifs comme ExodeUI.
Matrice de décision : que devez-vous choisir ?
Pour des transitions d'état statiques comme le soulignement d'un lien au survol ou l'apparition d'un texte, le CSS est parfait. Pour les volets tactiles, les cartes glissables, les interrupteurs et tout élément manipulé au doigt, les ressorts sont indispensables.
Principes clés à retenir
- Utilisez les transitions CSS pour des révélations courtes et non interruptibles
- Employez la physique de ressort dès que des gestes ou interruptions sont possibles
- Les ressorts éliminent les discordances temporelles à distances variables
- Les deux approches doivent impérativement animer transform et opacity