从 0 到 1 动画的不透明度在 Firefox 上不起作用

Question

正如标题所说，该动画不适用于 Firefox。

几秒钟后，我通过 JavaScript 运行此动画：

document.getElementById('my_id').style.webkitAnimationPlayState = "running";

我也试过了：

style.animationPlayState 

在同一个文件中，更改背景颜色动画效果很好。 我的结论是，Firefox 的不透明度有问题吗？

#my_id {
  opacity: 0;
  animation: animation 1s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  -webkit-animation: animation 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-play-state: paused;
  -moz-animation: animation 1s;
  -moz-animation-fill-mode: forwards;
  -moz-animation-play-state: paused;
}
@keyframes animation {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0.2;}
}

上面的 CSS 来自我想要动画的元素。

Answer 1

不要使用 JavaScript 添加-webkit-animation-play-state，只需使用包含所有浏览器前缀的onload 将一个类添加到您的#my_id div。

JavaScript

window.onload = function() {
  document.getElementById("my_id").className += "running";
}

CSS

#my_id.running {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}

上面的代码将.running 类添加到您的#my_id 元素中，它声明了animation-play-state: running，包括浏览器前缀。您可以通过查看我的使用您的代码的example 来测试上面的代码。我已经对其进行了测试，它适用于 Firefox (51)、Chrome、Opera 和 Safari。