prefers-reduced-motion
======================

La requêtes média 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;
  }
}
```


```
.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

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-motion |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Une introduction aux requêtes média pour la réduction de mouvement
* Responsive Design for Motion (WebKit Blog) comprend des exemples de déclencheurs de mouvements vestibulaires.