prefers-reduced-motion
CSS
media feature
is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
Important: An embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation.
no-preference
Indicates that the user has made no preference known to the system.
reduce
Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
For Firefox, the
reduce
request is honoured if:
gtk-enable-animations = false
到
[Settings]
block of
the GTK 3 configuration file
.
about:config
: Add a number preference called
ui.prefersReducedMotion
and set its value to
1
. Changes to this preference take effect immediately.
This example has a scaling animation by default. If Reduce Motion is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers.
<div class="animation">animated box</div>
.animation {
animation: pulse 1s linear infinite both;
}
/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
.animation {
animation-name: dissolve;
}
}
.animation {
background-color: #306;
color: #fff;
font: 1.2em sans-serif;
width: 10em;
padding: 1em;
border-radius: 1em;
text-align: center;
}
@keyframes pulse {
0% { transform: scale(1); }
25% { transform: scale(.9); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes dissolve {
0% { opacity: 1; }
50% { opacity: 0.8; }
100% { opacity: 1; }
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 5
The definition of 'prefers-reduced-motion' in that specification. |
编者草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
prefers-reduced-motion
media feature
|
Chrome 完整支持 74 | Edge 完整支持 79 | Firefox 完整支持 63 | IE 不支持 No | Opera 完整支持 62 | Safari 完整支持 10.1 | WebView Android 完整支持 74 | Chrome Android 完整支持 74 | Firefox Android 完整支持 64 | Opera Android 完整支持 53 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 11.0 |
完整支持
不支持