Animations mises en pause hors écran

Arrêter les animations CSS qui ne sont pas visibles, avec une classe et une option.

Activer la fonction

Dans Fonctionnalités visuelles, activez Mettre en pause les animations hors écran. GeneratePerf charge alors une petite feuille de style et un petit script (environ 1 Ko chacun avant compression).

L’utiliser

Ajoutez la classe pause-offscreen à tout élément qui porte une animation CSS, comme un défilé de logos ou une illustration en boucle :

<div class="marquee pause-offscreen">…</div>

L’animation ne tourne que lorsque l’élément est visible dans la fenêtre et se met en pause dès qu’il en sort. Les visiteurs qui demandent à leur système de réduire les animations (prefers-reduced-motion) ne la voient pas du tout.

La classe s’applique à l’élément qui la porte. Pour les animations de ses enfants, mettez-les en pause depuis votre propre CSS tant que le parent n’a pas la classe playing, que GeneratePerf ajoute quand l’élément est visible :

.my-block.pause-offscreen:not(.playing) > * { animation-play-state: paused; }

Les scripts qui ajoutent des éléments animés après le chargement de la page peuvent les enregistrer avec window.generateperfPauseOffscreen.observe().