css & prefers-reduced-motion
CSS media feature
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
<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;
}
}
demo
https://codepen.io/xgqfrms/pen/qBbdbbJ?editors=1010
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！