prefers-reduced-motion

Syntaxe

no-preference

Indique qu'aucune préférence n'a été exprimée sur l'appareil. Cette valeur-clé est évaluée à faux.

reduce

Indique que l'utilisateur·ice a activé le réglage de réduction des animations sur son appareil. La valeur-clé reduce est évaluée à vrai ; ainsi, @media (prefers-reduced-motion) est équivalent à @media (prefers-reduced-motion: reduce).

Préférences utilisateurs

Pour Firefox, la demande reduce est prise en compte si :

• Sous GTK/GNOME : Paramètres > Accessibilité > Vue > Réduction des animations activée.
  • Dans les anciennes versions de GNOME : Outils GNOME > onglet Général (ou Apparence selon la version) > Animations désactivées.
  • Ou bien, ajouter gtk-enable-animations = false dans le bloc [Settings] du fichier de configuration GTK 3 ^(angl.).
• Sous Plasma/KDE : Paramètres système > Comportement de l'espace de travail > Comportement général > « Vitesse d'animation » réglée complètement à droite sur « Instantané ».
• Sous Windows 10 : Paramètres > Options d'ergonomie > Affichage > Afficher les animations dans Windows.
• Sous Windows 11 : Paramètres > Accessibilité > Effets visuels > Effets d'animation.
• Sous macOS : Préférences Système > Accessibilité > Affichage > Réduire les animations.
• Sous iOS : Réglages > Accessibilité > Mouvement.
• Sous Android 9+ : Paramètres > Accessibilité > Supprimer les animations.
• Dans Firefox about:config : Ajouter une préférence numérique nommée ui.prefersReducedMotion et définir sa valeur à 0 pour les animations complètes ou à 1 pour indiquer une préférence pour la réduction des animations. Les modifications prennent effet immédiatement.

Exemples

Cet exemple utilise une animation de mise à l'echelle pour illustrer prefers-reduced-motion. Si vous activez la réduction des animations dans les préférences d'accessibilité de votre appareil, la requête média prefers-reduced-motion détectera votre préférence et le CSS contenu dans la règle de réduction des animations, ayant la même spécificité mais apparaissant plus tard dans l'ordre des sources CSS, prendra le dessus. Ainsi, l'animation de la boîte sera atténuée pour utiliser l'animation dissolve, plus douce et non déclenchante pour les troubles vestibulaires.

Atténuer l'animation de mise à l'echelle

HTML

<div class="animation">animated box</div>

CSS

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Atténuer l'animation pour éviter les déclencheurs vestibulaires. */
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

.animation {
  color: white;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

Résultat

Vous pouvez activer la réduction des animations sur votre appareil pour observer le changement d'animation. Cet exemple utilise la couleur de fond et la ligne au-dessus du texte pour mettre en évidence le passage d'une animation à l'autre selon que la préférence est activée ou non.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Sec-CH-Prefers-Reduced-Motion en-tête HTTP indications de l'agent utilisateur
• Introduction à la requête média reduced motion ^(angl.) sur CSS-Tricks (2019)
• Conception réactive pour le mouvement ^(angl.) sur le blog WebKit (2017)