Animer une interface sans la ralentir

Une animation réussie se remarque à peine. Elle guide le regard, confirme une action, relie deux états. Une animation ratée, elle, se remarque tout de suite : elle saccade, elle retarde, elle fatigue.

Voici les règles que je suis pour animer une interface sans la ralentir.

Animer ce qui a un sens

Avant de choisir une courbe, je me demande ce que l’animation explique. Une carte qui s’ouvre montre d’où vient le détail. Un toast qui glisse indique qu’il va repartir. Une animation qui n’explique rien est une décoration, et elle doit être encore plus discrète.

Les bonnes propriétés

Le navigateur anime très bien deux choses : transform et opacity. Tout le reste (largeur, hauteur, marges, ombres lourdes) le force à recalculer la mise en page à chaque image.

/* À privilégier */
.card {
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
}

/* À éviter sur un élément qui bouge souvent */
.card--slow {
  transition: width 0.4s ease, top 0.4s ease;
}

Des durées courtes

La plupart des micro-interactions tiennent entre 150 et 400 millisecondes. Au-delà, l’utilisateur attend l’interface au lieu de l’utiliser.

retour d’un clic

150 ms

ouverture d’un panneau

300 ms

transition de page, maximum

600 ms

Respecter le mouvement réduit

Certaines personnes désactivent les animations dans leur système, par confort ou par nécessité. Je respecte toujours ce réglage : les transitions deviennent instantanées, les boucles s’arrêtent.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

En résumé

• Chaque animation doit expliquer quelque chose.
• transform et opacity avant tout le reste.
• Des durées courtes, des courbes douces.
• Le mouvement réduit n’est pas une option.

Le meilleur compliment qu’on puisse faire à une animation, c’est de ne pas l’avoir remarquée, mais d’avoir trouvé l’interface agréable.