---
title: "Animations mises en pause hors écran - GeneratePerf"
description: "Arrêter les animations CSS qui ne sont pas visibles, avec une classe et une option."
url: "https://generateperf.com/fr/docs/animations-hors-ecran/"
lang: "fr-FR"
published: "2026-09-24T12:29:57+02:00"
modified: "2026-09-24T12:29:57+02:00"
---

[Documentation](https://generateperf.com/fr/documentation/) / Guides

# 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](https://generateperf.com/fr/docs/reglages-design/#customization), 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 :

```html
<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 :

```css
.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()`.