Javascript 使用“首选减少运动”禁用动画

今天，我想知道有人会如何根据

更喜欢减少运动的属性重置动画。
我发现这非常有用，但讨论仍在继续。我试过的代码是有效的，但是我想知道这个任务的最佳实践是什么

我的代码：

@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;
  }
}

如何改进这一点？这是最好的解决方案，还是我错过了什么？
好吧，你对此无能为力。这是
@media query
。当满足特定条件时，它将触发

我认为这里唯一多余的是使用
：：before
和
：：after
当您已经有
*
时，因为
*
将已经针对所有元素

如果您想支持旧版本的IE（8及之前），还可以使用
：after

查看更多详细信息

基本上就是这样
我认为通用选择器不会以伪元素为目标
CSS通用选择器（*）匹配任何类型的元素。
取自yes元素，但不是伪元素。您可以在这里看到：只需检查来自：：before的z索引