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

正如标题所说，这个动画在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来自我想要制作动画的元素。

不要使用JavaScript来添加

-webkit动画播放状态

，只需使用包含所有浏览器前缀的

onload

向您的

#my_id

div添加一个类即可

JavaScript
CSS
上面的代码将
.running
类添加到
#my_id
元素中，该元素声明
动画播放状态：running
，包括浏览器前缀。您可以通过签出使用您的代码的my来测试上述代码。我已经测试过了，它可以在Firefox（51）、Chrome、Opera和Safari中使用。
您没有右括号（
}
），您的
-webkit动画
属性具有
1ss
，而不是
1s
。另外，您应该切换CSS类以获取CSS动画，而不是使用JS设置CSS属性本身。您知道您缺少一个结尾
}
我想？是的，我复制代码失败了。。这不是问题。你在运行哪个版本的firefox？51.0.1（32位）显然我只是使用
onload
作为例子。您可以将语句更改为在运行
函数之前等待几秒钟。嗯，这终于开始起作用了。这个和以前的解决方案现在都很好。但还有一个问题。当我尝试放置SVG图像时不工作<代码>
此选项仅适用于Chrome上的第一个解决方案，而您的解决方案根本不起作用。我的svg包含有问题吗？
window.onload = function() {
  document.getElementById("my_id").className += "running";
}

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