xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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 发布文章使用：只允许注册用户才可以访问！

---