---
title: prefers-reduced-motion
slug: Web/CSS/@media/prefers-reduced-motion
translation_of: Web/CSS/@media/prefers-reduced-motion
---
{{CSSRef}}

La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) [CSS](/fr/docs/Web/CSS) **`prefers-reduced-motion`** détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.

> **Attention :** Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.

## Syntaxe

- `no-preference`
  - : Cette valeur indique que l'utilisateur n'a rien indiqué au système.
- `reduce`
  - : Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.

## Gestion des préférences

Dans Firefox, la valeur `reduce` est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :

- Pour GTK/Gnome, si `gtk-enable-animation` vaut `false`. Cela peut être configuré par le menu « Ajustements » de Gnome.
- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows
- Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations.
- Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations.
- Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations.
- Dans la page `about:config` de Firefox : Ajoutez une préférence numérique appelée `ui.prefersReducedMotion` et définissez sa valeur soit à `0` pour des animations complètes, soit à `1` pour indiquer une préférence pour des mouvements réduits. Les modifications apportées à cette préférence prennent effet immédiatement.

## Exemple

Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.

### HTML

```html
<div class="animation">boîte animée</div>
```

### CSS

```css
.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
  animation: none;
  }
}
```

```css hidden
.animation {
  background-color: rebeccapurple;
  color: #fff;
  font: 1.2em Helvetica, arial, sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-2 13:47:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */

@keyframes vibrate {
  0% {
      transform: translate(0);
  }
  20% {
      transform: translate(-2px, 2px);
  }
  40% {
      transform: translate(-2px, -2px);
  }
  60% {
      transform: translate(2px, 2px);
  }
  80% {
      transform: translate(2px, -2px);
  }
  100% {
      transform: translate(0);
  }
}
```

### Résultat

{{EmbedLiveSample("Exemple")}}

## Spécifications

| Spécification                                                                                                                            | Statut                                   | Commentaire          |
| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. |

## Compatibilité des navigateurs

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

## Voir aussi

- [Une introduction aux requêtes média pour la réduction de mouvement](https://css-tricks.com/introduction-reduced-motion-media-query/)
- [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) comprend des exemples de déclencheurs de mouvements vestibulaires.