Conseils pour de meilleures transitions et animations CSS

Les faire plus courtes qu’on ne le pense

• Une transition simple dure entre 0,15 et 0,4 seconde
• Accélérez jusqu’à ce que cela vous paraisse trop rapide, puis réduisez un peu

Adapter l’action à la courbe

• Le mouvement est aussi subjectif que la couleur, mais tout aussi important
• Pensez au mouvement dans le monde réel et comparez

Accélération et décélération

• Si une animation paraît peu naturelle, c’est souvent parce qu’elle démarre ou s’arrête brusquement
• Même léger, il vaut mieux ajouter un easing-in/out à une courbe cubic-bezier
• Pour un rendu plus réaliste, l’« inertie » peut aussi être utile

Moins, c’est mieux

• Plus un élément change de propriétés pendant l’animation, plus le risque qu’elle paraisse excessive augmente
• Si l’opacité passe de 0 à 1, essayez 0,4 au lieu de 1. Si vous changez la taille, commencez avec une réduction légère seulement
• Dans la plupart des cas, une animation qui revient à sa position doit se déplacer de 5 à 40 pixels

Éviter les valeurs par défaut du navigateur

• Les navigateurs intègrent des courbes comme linear, ease, ease-in, ease-out et ease-in-out
• C’est pratique et utile dans certains cas, mais c’est tellement générique que tout finit par se ressembler (comme les sites faits avec Bootstrap/Tailwind)
• Essayez les valeurs d’autocomplétion des courbes cubic-bezier dans VS Code
• Ou ouvrez les outils de développement du navigateur et utilisez l’éditeur de courbes

Plusieurs propriétés, plusieurs easing

• Ce n’est pas toujours utile, mais quand plusieurs propriétés doivent changer en même temps (par exemple transform et opacity)
  • Appliquer la même courbe cubic-bezier peut parfois bien rendre, mais ce n’est pas toujours le cas
  • Une courbe qui fonctionne bien pour transform peut mal convenir à un fade
  • Dans ce cas, mieux vaut choisir un easing différent selon chaque propriété CSS
• On peut séparer les animations @keyframes par propriété, ou utiliser plusieurs transitions
  • opacity en linear, transform en cubic-bezier(.5, 0, .5, 1)

Utiliser des délais décalés

• Quand plusieurs éléments ont une transition, ne sous-estimez pas l’effet de animation-delay ou transition-delay

Le In sort, le Out entre

• Il existe trois types de courbes d’easing
  • ease in (démarrage lent)
  • ease out (fin lente)
  • in-out (rapide au milieu, lent au début et à la fin)
• La difficulté avec les transitions, c’est qu’on veut souvent que le in soit en ease-out, et le out en ease-in
  • Une animation où un élément sort et un autre entre est perçue par l’utilisateur comme une seule transition, mais en interne ce sont deux transitions
  • Ce qui sort doit ralentir progressivement, donc il lui faut un ease-in, et ce qui entre doit être en ease-out

S’appuyer sur l’accélération matérielle

• Toutes les propriétés CSS ne fonctionnent pas de manière fluide sur tous les appareils et navigateurs
• Propriétés toujours compatibles avec l’accélération matérielle
  • transform (toutes les variantes de translate, scale, rotate, ainsi que les versions 3D)
  • opacity
• Propriétés parfois compatibles avec l’accélération matérielle
  • Certaines propriétés SVG
  • filter (selon le navigateur et le filtre)
• Canvas et WebGL bénéficient aussi de l’accélération matérielle, mais ce n’est pas le sujet ici
• Donc, pour déplacer, redimensionner ou faire pivoter un élément, utilisez toujours la propriété CSS transform
• Quoi qu’il arrive, ne modifiez pas directement la taille ou la position d’un élément
  • Modifier directement des propriétés qui affectent la mise en page, comme height, width, border, margin ou padding, risque de ralentir visiblement la page

Utiliser will-change si nécessaire

• Si, en théorie, l’animation devrait être fluide et performante mais paraît malgré tout peu naturelle, utilisez la propriété will-change
• Elle permet d’indiquer à l’avance ce qui va changer, et donc d’éviter certains calculs

Bonus : respecter les préférences de l’utilisateur

• L’utilisateur peut indiquer dans les réglages de son appareil qu’il préfère le « reduced motion »
• On peut détecter cette valeur avec une media query ou via JavaScript, puis adapter le comportement en conséquence