Animations sur un site web : apports, coûts et limites

Une animation sur un site web rend service quand elle explique quelque chose : elle guide le regard, confirme qu’un clic a été pris en compte, montre d’où sort un panneau qui s’ouvre. Mal dosée, elle alourdit les pages, retarde les réactions de l’interface et gêne une partie des visiteurs. Tout l’enjeu tient dans ce tri.

Animation site web : ce que le mouvement explique

Le mouvement attire l’œil plus vite que la couleur ou la taille. C’est sa force et son risque : deux éléments animés en même temps se disputent l’attention. Sur un site web animé d’entreprise, trois emplois justifient presque toujours l’effort :

• guider le regard : un bloc qui glisse en place après le titre indique l’ordre de lecture ;
• signaler un état : le bouton qui s’enfonce à l’appui, la roue qui tourne pendant l’envoi d’un formulaire, la coche qui confirme la demande ;
• rendre une interaction lisible : un menu qui se déplie depuis son bouton, une fiche qui s’agrandit à partir de sa vignette.

Sans retour visuel, votre visiteur clique une deuxième fois, ou part en croyant que rien ne s’est produit. La documentation web.dev de Google le formule à propos de la stabilité des pages : un contenu qui se déplace progressivement et naturellement d’une position à l’autre aide souvent l’utilisateur à comprendre ce qui se passe.

Le reste relève du mouvement décoratif : légitime pour une marque qui vend une ambiance, plus discutable sur la page de contact d’un artisan. Devant chaque effet proposé, demandez-vous ce que votre visiteur comprend grâce à lui.

Cinq familles d’animations, du bouton à la vidéo

Toutes les animations ne pèsent pas le même poids, ni en fichiers ni en heures de production. Les classer aide à lire un devis.

Les micro-interactions

Changement de teinte d’un bouton au survol, léger enfoncement à l’appui, champ qui se colore une fois bien rempli. Les micro-interactions durent une fraction de seconde, répondent à un geste précis et tiennent en général dans les règles de style du site, sans fichier supplémentaire.

Les transitions entre deux états

Un menu qui s’ouvre, un accordéon qui se déplie, une fenêtre qui se superpose à la page. La transition relie l’avant et l’après pour que le changement ne surprenne pas. Réussie, elle passe inaperçue.

Les effets liés au défilement

Blocs qui apparaissent en entrant dans l’écran, images qui défilent moins vite que le texte (la parallaxe), chiffres qui s’incrémentent. Les animations au défilement sont les plus demandées en réunion et les plus discutables à l’arrivée : elles retardent un contenu que le visiteur cherche déjà, et la parallaxe donne des vertiges à certaines personnes.

Les animations de chargement

Roue qui tourne, barre qui progresse, blocs gris qui esquissent la page avant son contenu. Une animation de chargement rassure pendant une attente réelle, sans la raccourcir. Ces blocs gris ont un autre mérite, selon web.dev : réserver d’avance la place d’un contenu tardif, pour qu’il ne pousse pas le reste de la page en arrivant.

Les vidéos et illustrations animées

Vidéo en boucle derrière le titre d’accueil, GIF animé, illustration vectorielle qui s’anime : c’est la famille la plus lourde. Dans un exemple publié par web.dev, un GIF de 3,7 Mo descend à 551 Ko une fois converti en vidéo, et à 341 Ko dans un second format. Une boucle se livre donc en vidéo, lue sans son, avec une image fixe affichée avant la lecture.

Le coût en performance, mesuré par les Core Web Vitals

Les Core Web Vitals de Google sont trois indicateurs de l’expérience réelle des visiteurs. Leurs seuils de bon résultat, publiés sur web.dev, s’observent au 75e centile des chargements, séparément sur mobile et sur ordinateur :

• l’affichage du plus grand élément visible (LCP), en 2,5 secondes au plus ;
• la réaction aux interactions (INP), en 200 millisecondes au plus ;
• la stabilité visuelle (CLS), avec un score de 0,1 au plus.

Les décalages de mise en page

Animer la hauteur, la largeur ou les coordonnées d’un bloc oblige le navigateur à recalculer la mise en page : les voisins bougent, et chaque saut s’ajoute au CLS. Le guide de web.dev sur ce score recommande d’animer par transformation, en déplaçant ou en agrandissant l’élément sans toucher à ses dimensions ; une animation construite de cette façon ne compte pas dans le score.

Les décalages survenus dans les 500 millisecondes qui suivent un clic, un appui ou une touche du clavier sont exclus du calcul, parce que le visiteur attend un changement. Le défilement n’ouvre pas cette tolérance : un bloc qui surgit en repoussant le texte pendant la lecture est compté, tout comme les transitions d’un carrousel automatique qui déplacent réellement des blocs.

La réactivité et le poids des fichiers

L’INP mesure le délai entre un clic, un appui ou une frappe et l’image suivante affichée à l’écran ; le survol et le défilement n’y entrent pas. Un effet déclenché par un bouton et piloté par un script lourd retarde cette image : votre visiteur croit alors que le bouton ne répond pas.

Chaque bibliothèque, vidéo ou illustration animée alourdit aussi les fichiers à télécharger, en concurrence avec le titre et l’image principale de l’accueil. Le guide des carrousels de web.dev avance un dernier argument, non technique : les animations qui démarrent seules détournent le regard du contenu important, et les internautes, qui les associent à de la publicité, finissent par les ignorer.

Accessibilité : laisser chacun couper le mouvement

Pour certaines personnes, une animation provoque un vrai malaise physique. La documentation web.dev rappelle que les animations au défilement et la parallaxe peuvent déclencher, en cas de troubles vestibulaires (ceux de l’oreille interne), des vertiges, des nausées et des migraines.

Ordinateurs et téléphones proposent, dans leurs réglages d’accessibilité, une option pour réduire les animations. Un site bien construit lit ce réglage (la requête de média prefers-reduced-motion) et sert une version apaisée : un fondu au lieu d’un glissement, une apparition directe au lieu d’une entrée décalée. La même source conseille ces variantes plutôt que de tout figer.

Les règles pour l’accessibilité des contenus web (WCAG), publiées par le W3C, y consacrent trois critères :

• le 2.2.2, de niveau A : un contenu en mouvement qui démarre seul, dure plus de cinq secondes et s’affiche parmi d’autres contenus doit pouvoir être mis en pause, arrêté ou masqué, ce qui vise les carrousels automatiques ;
• le 2.3.1, de niveau A : rien ne doit clignoter plus de trois fois par seconde, sauf sous les seuils de flash fixés par la norme ;
• le 2.3.3, apparu avec la version 2.1 au niveau AAA : une animation de mouvement déclenchée par une interaction doit pouvoir être désactivée, sauf si elle est essentielle.

Côté français, le RGAA, tenu par la direction interministérielle du numérique, traduit ces exigences en tests. Dans sa version 4.1.2, le critère 13.8 vérifie que chaque contenu en mouvement ou clignotant reste contrôlable : un mouvement lancé automatiquement dure cinq secondes au plus, ou peut être arrêté et relancé, masqué, ou remplacé par l’information complète sans mouvement. Le site du référentiel annonce une version 5 pour fin 2026.

Produire et entretenir des animations : où passe le temps

Une animation figure rarement comme une ligne à part sur un devis, et c’est là que les écarts se cachent. Son coût se répartit entre quatre postes :

• la conception : ce qui bouge, dans quel ordre, à quelle vitesse, puis la variante sans mouvement ;
• la production : règles de style, script pour les séquences enchaînées, fichier d’animation vectorielle ou vidéo à tourner puis à compresser ;
• les tests : plusieurs navigateurs, un téléphone d’entrée de gamme, le clavier seul, la réduction des animations activée ;
• l’entretien : bibliothèques à mettre à jour, illustration ou vidéo à refaire quand l’offre ou le produit changent.

Un texte se corrige en quelques minutes dans l’outil d’administration ; une phrase intégrée à une vidéo oblige à rouvrir le fichier source, souvent chez le prestataire qui l’a produit. Le guide des carrousels de web.dev déconseille d’ailleurs d’incruster du texte dans les images. Exigez que tout texte reste du vrai texte, posé au-dessus de l’effet, et que les fichiers sources vous soient remis.

Les effets simples, survol d’un bouton ou ouverture d’un menu, ne réclament ni licence ni fichier supplémentaire : leur coût se compte en heures de conception et de vérification.

Inscrire les animations au cahier des charges, puis les vérifier

Une demande vague, « un site moderne avec des animations », produit des devis impossibles à comparer. Dans les exigences techniques de votre cahier des charges, décrivez plutôt chaque effet animé par sa fonction :

• l’élément concerné et ce qu’il doit faire comprendre ;
• son déclencheur : chargement, survol, clic ou défilement ;
• son comportement quand la réduction des animations est active ;
• le bouton de pause de tout contenu qui démarre seul ;
• l’engagement de ne provoquer aucun décalage de mise en page.

Une maquette graphique reste immobile : elle ne montre ni durée ni enchaînement. Pour les deux ou trois transitions qui comptent, demandez une courte capture vidéo ou une animation dans le prototype cliquable de la maquette. Jugez-les sur un téléphone, à vitesse réelle, en répétant le geste : un effet charmant à la première ouverture lasse souvent à la dixième.

À la recette, activez la réduction des animations sur votre téléphone, puis parcourez l’accueil et le formulaire de contact. Aucun contenu ne doit disparaître, les carrousels doivent s’arrêter et les boutons répondre sans délai. Ce contrôle s’inscrit dans la phase de tests des étapes d’un projet de création de site, avant la mise en ligne.

Prochaine étape : listez chaque élément qui bouge sur votre site ou votre maquette, et notez à côté ce qu’il explique au visiteur. Les animations du site restées sans réponse sont les premières à retirer, avant toute discussion de budget.