CSS媒体查询'prefers-reduced-motion'打破了Ubuntu上Firefox的bootstrap 4动画

Question

我在Bootstrap 4和Firefox 65上的Ubuntu上进行了一些前端开发。由于bootstrap.css中的规则，某些动画无法工作：

@media screen and (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none
    }
}

Ubuntu似乎希望减少运动。如何禁用它？谢谢。

Answer 1

这是Web浏览器从现在开始将使用的CSS新功能。可以在这里了解更多信息：Google Developers

曾经遇到过这个问题。我能找到的最接近的解决方案是覆盖引导CSS

`@media screen and (prefers-reduced-motion: reduce){
  .fade {
    transition: none;
  }
}` 

与此：

`@media screen and (prefers-reduced-motion: reduce){
  .fade {
    transition: opacity .15s linear!important;
  }
}`

它将带回淡入效果。但不像以前那么顺利。