prefers-reduced-motion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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.