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，只需使用包含所有浏览器的#my_id向div onload添加一个类前缀。

的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浏览器。

从0到1的不透明度动画不适用于Firefox

1 个答案:

的JavaScript

CSS