Faire bouger une page sans la rendre illisibleAdding motion to a page without making it unreadable

Une page entièrement statique paraît morte ; une page qui bouge partout est épuisante. Entre les deux, il y a un registre étroit, et quelques règles qui permettent de s’y tenir.A completely static page looks dead; a page that moves everywhere is exhausting. Between the two lies a narrow register, and a handful of rules that keep you in it.

Ce qu'une animation doit faireWhat an animation must do

Une animation utile explique quelque chose : d’où vient un élément qui apparaît, où va celui qui disparaît, qu’un bouton a bien été pressé, qu’un contenu se charge. Une animation décorative, elle, doit rester en arrière-plan, lente, et ne jamais entrer en concurrence avec la lecture.A useful animation explains something: where an appearing element comes from, where a disappearing one goes, that a button was pressed, that content is loading. A decorative animation must stay in the background, slow, and never compete with reading.

Le piège qui coûte le plus cherThe most expensive trap

Faire apparaître les sections en fondu est l’effet le plus répandu. Il a un défaut que personne ne voit venir : pendant la transition, le texte est à opacité partielle, donc son contraste réel tombe sous le seuil de lisibilité. Les outils d’audit d’accessibilité qui mesurent la page à cet instant signalent des dizaines d’échecs de contraste.Fading sections in is the most widespread effect. It has a flaw nobody sees coming: during the transition the text sits at partial opacity, so its real contrast falls below the legibility threshold. Accessibility audit tools that measure the page at that instant report dozens of contrast failures.

Le remède est simple et sans perte visuelle : animer uniquement le déplacement, jamais l’opacité du texte. Le mouvement se voit tout autant, et le texte reste pleinement lisible du premier au dernier millième de seconde.The remedy is simple and costs nothing visually: animate movement alone, never the opacity of text. The motion reads just as well, and the text stays fully legible from the first millisecond to the last.

Vingt-cinq échecs de contraste sur un audit, tous dus à un fondu de 400 millisecondes. Retirer le fondu a suffi à passer de 96 à 100 sans toucher à une seule couleur.Twenty-five contrast failures in an audit, all caused by a 400-millisecond fade. Removing the fade was enough to go from 96 to 100 without touching a single colour.

Les règles tenues sur ce siteThe rules held on this site

• Rien ne bouge pendant la lecture : les animations se déclenchent à l’arrivée d’une section, une seule fois.Nothing moves while you read: animations fire once, as a section arrives.
• Aucune animation ne dépasse une demi-seconde, sauf les mouvements de fond, très lents et de très faible amplitude.No animation exceeds half a second, except background motion, which is very slow and very slight.
• On n’anime que la transformation et, sur les éléments non textuels, l’opacité.Only transform is animated, plus opacity on non-text elements.
• Rien ne clignote, rien ne défile en boucle dans le champ de lecture.Nothing flashes, nothing loops in the reading area.

Le test finalThe final test

Charger la page, lire un paragraphe du début à la fin, et se demander si quelque chose a distrait. Si oui, c’est de trop. Ce test ne s’automatise pas et il reste le plus fiable.Load the page, read one paragraph from start to finish, and ask whether anything distracted you. If so, it is too much. This test cannot be automated and it remains the most reliable.