Une animation web réussie est fluide, presque imperceptible dans son confort ; une animation ratée saccade, hache le mouvement et donne une impression de site poussif. La différence tient souvent à une notion technique méconnue : selon les propriétés que l’on anime, le navigateur peut traiter le mouvement très efficacement, ou au contraire recalculer toute la page à chaque image. On parle alors d’animations non composées, par opposition aux animations composées qui restent confiées à la couche d’affichage la plus rapide. Comprendre cette distinction est la clé d’animations fluides. Voyons ce que recouvrent ces notions, comment le navigateur dessine et anime une page, pourquoi les animations non composées dégradent l’expérience, et comment concevoir des mouvements réellement fluides.

Les animations non composées, définition d’un frein à la fluidité

Une animation non composée est un mouvement qui oblige le navigateur à recalculer la disposition ou le dessin de la page à chaque image, plutôt que de se contenter de déplacer un élément déjà préparé. Ce surcoût pèse sur la fluidité et, indirectement, sur les indicateurs des Core Web Vitals. À l’inverse, une animation composée reste légère et fluide, car elle évite ces recalculs coûteux.

Ce qu’on appelle animation composée

Une animation est dite composée lorsqu’elle ne sollicite que l’étape finale du rendu, celle qui assemble les couches déjà dessinées. Déplacer ou faire varier l’opacité d’un élément se fait alors sans rien recalculer, simplement en réarrangeant des couches préparées. Ce traitement ultra-efficace permet d’atteindre une fluidité parfaite, même sur des appareils modestes. Ce type d’animation peut souvent être confié à la carte graphique, qui excelle dans ce genre d’opérations. Le navigateur prépare l’élément une fois, puis le fait bouger sans repasser par les étapes lourdes du rendu. Cette délégation au matériel graphique est ce qui rend les bonnes animations si fluides et si peu coûteuses pour le processeur principal. Le secret tient donc moins à l’animation elle-même qu’aux propriétés que l’on choisit d’animer. Certaines restent dans cette voie rapide, d’autres en sortent et déclenchent des recalculs. Savoir distinguer les unes des autres est la base d’une animation performante, bien avant toute considération esthétique sur le mouvement souhaité.

Le coût d’une animation non composée

À l’inverse, animer une propriété qui modifie la disposition ou l’apparence des éléments force le navigateur à refaire une partie du travail à chaque image. Recalculer les positions, redessiner les pixels, tout cela se répète des dizaines de fois par seconde, ce qui mobilise lourdement le processeur et menace la fluidité du mouvement. Le résultat se voit immédiatement à l’écran. Quand le navigateur ne tient pas le rythme, des images sont sautées, et le mouvement devient saccadé. Cette perte de fluidité visible trahit une animation non composée, et signale que le coût de calcul dépasse ce que l’appareil peut absorber dans le temps imparti à chaque image. Ce coût est d’autant plus pénalisant qu’il s’ajoute à tout le reste. Pendant que le navigateur recalcule l’animation, il ne peut pas répondre aux actions de l’utilisateur. Une animation non composée nuit donc non seulement à sa propre fluidité, mais aussi à la réactivité générale de la page, par accaparement du fil principal.

Comment le navigateur compose et anime une page

Pour comprendre pourquoi certaines animations saccadent, il faut connaître les étapes par lesquelles le navigateur transforme du code en pixels animés. C’est cette chaîne, et l’endroit où une animation s’y insère, qui détermine sa fluidité. Ce sujet complète notre précédent article : Le code tiers.

Les étapes du rendu : disposition, dessin, composition

Pour afficher une image, le navigateur enchaîne plusieurs étapes : il calcule d’abord la disposition de chaque élément, dessine ensuite leurs pixels, puis assemble le tout en couches superposées. Chaque étape est plus coûteuse que la suivante, et la première, le calcul de la disposition, est la plus lourde de toutes, car elle peut affecter toute la page. Une animation fluide est celle qui n’intervient qu’à la dernière étape, la composition. Elle se contente de réarranger des couches déjà calculées et dessinées, sans rien refaire en amont. Plus une animation remonte vers les premières étapes, plus elle coûte cher, car elle déclenche un travail qui aurait pu être évité. Tout l’enjeu consiste donc à maintenir l’animation au plus près de la fin de cette chaîne. Animer une propriété qui ne touche que la composition garantit la fluidité ; en animer une qui force un recalcul de disposition la compromet. Cette logique de proximité avec la dernière étape résume le principe d’une animation performante.

Les propriétés qui restent sur le compositeur

En pratique, deux familles de propriétés permettent d’animer sans quitter l’étape de composition : celles qui déplacent, tournent ou redimensionnent un élément via une transformation, et celles qui modifient sa transparence. Ces propriétés n’affectent ni la disposition ni le dessin des autres éléments, ce qui les rend idéales pour un mouvement fluide. À l’opposé, animer une dimension, une marge ou une position classique force le navigateur à recalculer la disposition de la page. Animer une couleur de fond ou une ombre le force à redessiner. Ces propriétés entraînent les étapes coûteuses, et leur animation produit presque toujours des saccades sur les appareils les moins puissants. Le tableau ci-dessous oppose les propriétés fluides aux propriétés coûteuses à animer.

Le rôle de la carte graphique

Les animations composées peuvent être confiées à la carte graphique, conçue précisément pour manipuler des couches d’images à grande vitesse. Le navigateur prépare l’élément sur sa propre couche, puis laisse le matériel graphique l’animer. Cette accélération matérielle explique la fluidité parfaite des bonnes animations, même nombreuses. Cette délégation libère le fil principal, qui reste disponible pour répondre à l’utilisateur. Pendant que la carte graphique anime, le navigateur peut traiter les clics et les saisies sans à-coups. On obtient ainsi une animation fluide sans sacrifier la réactivité, là où une animation coûteuse monopoliserait au contraire toutes les ressources. Encore faut-il que l’animation s’y prête. Seules les propriétés adaptées peuvent être ainsi déléguées ; les autres restent à la charge du processeur principal. Concevoir des animations qui tirent parti du matériel graphique suppose donc de choisir les bonnes propriétés dès le départ, ce qui nous amène aux bonnes pratiques de mise en oeuvre.

Pourquoi les animations non composées dégradent l’expérience

Au-delà de la seule fluidité, les animations non composées pèsent sur l’ensemble de l’expérience, en sollicitant les mêmes ressources que le rendu de la page. Une animation qui force des recalculs vole du temps de calcul à tout le reste, avec des conséquences bien au-delà du mouvement lui-même.

Des animations saccadées

Le symptôme le plus visible est la saccade. Pour paraître fluide, une animation doit produire un grand nombre d’images par seconde ; dès que le navigateur n’y parvient pas, le mouvement devient haché. Cette rupture de fluidité est immédiatement perçue par l’oeil et donne une impression de site mal conçu ou poussif. L’effet est plus marqué sur les appareils modestes, dont le processeur sature plus vite. Une animation qui passe inaperçue sur un ordinateur puissant peut saccader franchement sur un téléphone d’entrée de gamme. Concevoir pour le maillon le plus faible est donc indispensable, sous peine d’exclure une part de l’audience d’une expérience confortable. La saccade est d’autant plus pénalisante qu’elle attire l’attention. Un mouvement fluide se fait oublier ; un mouvement haché, lui, se remarque et agace. Une animation censée embellir le site produit alors l’effet inverse, en soulignant un défaut plutôt qu’en valorisant le contenu qu’elle était censée mettre en avant.

Une batterie et un processeur sollicités

Une animation non composée fait tourner le processeur à plein régime, ce qui consomme de l’énergie. Sur un appareil mobile, cela se traduit par une batterie qui se vide plus vite et parfois par un échauffement. Un détail esthétique mal maîtrisé peut ainsi avoir des conséquences très concrètes sur le confort d’usage. Cette sollicitation a aussi un coût d’opportunité. Le temps de calcul consacré à recalculer une animation n’est plus disponible pour répondre aux actions de l’utilisateur. La page devient alors moins réactive pendant l’animation, ce qui dégrade l’interactivité au moment précis où le visiteur est le plus susceptible d’agir. Ces effets se cumulent sur les pages riches en animations. Multiplier les mouvements coûteux finit par rendre une page lourde et désagréable, à rebours de l’effet recherché. Maîtriser le coût de chaque animation est donc une question de sobriété autant que de performance, au service d’une expérience à la fois belle et fluide.

Créer des animations composées et fluides

Concevoir des animations composées sur un site Internet ne demande pas de renoncer à l’esthétique, mais de choisir les bonnes techniques. Quelques principes simples suffisent à obtenir des mouvements fluides sans surcharger l’appareil du visiteur.

Privilégier la transformation et l’opacité

La règle d’or est d’animer en priorité les propriétés de transformation et d’opacité, qui restent à l’étape de composition. Plutôt que de modifier la position classique d’un élément, on le déplace par une transformation ; plutôt que d’animer une dimension, on le redimensionne de la même façon. Ce choix de propriétés fluides garantit l’essentiel de la performance. Cette approche couvre la grande majorité des besoins d’animation courants : apparitions, déplacements, mises en avant, transitions. Avec un peu d’habitude, on apprend à exprimer un effet désiré à travers ces propriétés économes. On obtient le même résultat visuel qu’avec des propriétés coûteuses, mais sans en payer le prix en fluidité. Quand un effet semble exiger une propriété coûteuse, il existe presque toujours une alternative. Repenser l’animation pour la ramener vers la transformation ou l’opacité est un réflexe payant. Cette traduction vers les propriétés fluides est l’une des compétences clés pour animer le web sans saccade, quel que soit l’appareil.

Isoler les éléments animés

Pour aider le navigateur, on peut signaler à l’avance qu’un élément va être animé, afin qu’il le prépare sur sa propre couche. L’élément est alors prêt à bouger sans perturber le reste de la page. Cette isolation de l’élément animé facilite sa prise en charge par le matériel graphique et fluidifie le mouvement. Cette technique doit toutefois rester mesurée. Préparer trop d’éléments sur des couches séparées consomme de la mémoire et peut, à l’excès, nuire à la performance. On réserve donc cette isolation aux éléments réellement animés, sans en abuser, pour conserver le bénéfice sans en payer la contrepartie. L’idée générale est d’aider le navigateur sans le surcharger. Un signal bien placé sur un élément clé l’aide à anticiper ; une multiplication de signaux le désoriente. Trouver ce juste dosage de la préparation distingue une optimisation efficace d’une accumulation de réglages qui finiraient par produire l’effet inverse.

Mesurer et corriger

Les outils de développement du navigateur permettent d’observer la fluidité d’une animation et de repérer les étapes coûteuses qu’elle déclenche. On voit alors précisément si une animation reste à la composition ou force des recalculs. Cette mesure objective transforme une impression de saccade en diagnostic précis, indispensable pour corriger au bon endroit. Le contrôle gagne à se faire sur des appareils représentatifs, et pas seulement sur une machine puissante. Tester sur un mobile modeste révèle des saccades invisibles ailleurs. Adopter ce point de vue de l’appareil le plus faible est la meilleure garantie d’animations réellement fluides pour l’ensemble des visiteurs, et pas seulement pour le développeur. Le tableau ci-dessous résume les bons réflexes pour des animations fluides.