Question

今天，我想知道有人如何基于prefers-reduced-motion属性重置动画。我发现这个link非常有用，但是讨论仍在进行中。我尝试过的代码行得通，但是我想知道此任务的最佳实践。

我的代码：

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1s !important;
    animation-duration: 1s !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }
}

如何改进？这是最好的解决方案，还是我错过了什么？

Answer 1

那么你就无能为力了。是@media query。满足特定条件时将触发。

我认为唯一多余的是在已经拥有::before的情况下使用::after和*，因为*已经定位了所有元素。

如果要支持IE的旧版本（8及更低版本），也可以使用:after

查看this link了解更多详情

差不多

以“喜欢的动作减少”禁用动画

1 个答案: