CSS 动画在 Firefox 中不起作用答案

【问题标题】：CSS animation won't work in FirefoxCSS 动画在 Firefox 中不起作用
【发布时间】：2018-06-25 06:18:03
【问题描述】：

我有一个处于“多个”模式的选择框，它异步获取其数据。在等待数据时，我希望选择框显示一个微调器。我有以下代码在 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 和内容，但到目前为止没有成功。

【问题讨论】：

problem with <select> and :after with CSS in WebKit的可能重复
不确定它是否与该问题重复——在他的情况下，伪元素将在 Chrome 中工作。

标签： css cross-browser css-animations

【解决方案1】：

问题不在于动画。这是因为在select中使用了伪元素。

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

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

【讨论】：

如果发现类似问题最好标记为重复
我发布的问题是我所说的证明 - 不是答案。他认为问题出在动画上。

【解决方案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>

【讨论】：

加载类也应该移动到 .select-wrapper。由于类是加载的指示器，并且动画绑定到包装器