CSS 动画在 Firefox 中不起作用

Question

我有一个 select 框处于 "multiple" 模式，可以异步获取其数据。在等待数据时，我希望 select 框显示一个微调器。我有以下代码在 Chrome、Chromium 和 Edge 下工作，但在 Firefox 下（在 52 和 57 上测试）该框保持纯白色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .multiselect {
      width: 300px;
      height: 200px;
      position: relative;
    }
    .loading:before, .loading:after{
      content: "";
      position: absolute;
      bottom: 0; left: 0; right: 0; top: 0;
      z-index: 1000;
      pointer-events: none;
      overflow: hidden;
    }
    .loading:before {
      width:100%; height:100%;
      background-color: rgba(211, 211, 211, .8);
    }
    .loading:after {
      margin: auto;
      width: 32px; height: 32px;
      border: 4px solid #F37324;
      border-left-color: transparent;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 600ms infinite linear;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(359deg); }
    }
  </style>
</head>
<body>
  <div>
    <select class="multiselect loading" multiple></select>
  </div>
</body>
</html>

我找到一个工具 (https://www.browseemall.com/Compatibility/ValidateCSS) 告诉我这个 CSS 与 FF37 兼容。

我尝试将供应商特定规则 -moz- 添加到 @keyframes、变换和动画，并尝试使用 z-index 和内容，但到目前为止没有成功。

Answer 1

问题不在动画中。这是因为在select.

中使用了伪元素

在 select 中使用 after 和 before 伪元素不是好的做法。您应该添加一个包装器 div 并设置 div.

的样式

problem with <select> and :after with CSS in WebKit

Answer 2

select 在浏览器之间的处理方式不同。最好避免使用伪元素。在您的例子中，伪元素在 Chrome 中应用，但在 Firefox 中没有应用。

作为替代方法，将伪元素应用于包装器。

fiddle

.select-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.loading {
  width: 300px;
  height: 200px;
}

.select-wrapper:before,
.select-wrapper:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

.select-wrapper:before {
  width: 100%;
  height: 100%;
  background-color: rgba(211, 211, 211, .8);
}

.select-wrapper:after {
  margin: auto;
  width: 32px;
  height: 32px;
  border: 4px solid #F37324;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 600ms infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class="select-wrapper">
  <select class="multiselect loading" multiple></select>
</div>

CSS 动画在 Firefox 中不起作用

CSS animation won't work in Firefox

css

cross-browser

css-animations