css动画在chrome和safari中工作，而不是在mozilla中

我是CSS新手。我如何使这个css动画在Firefox和Chrome中都工作。现在它可以在Chrome和Safari中使用，但不能在Firefox中使用

到目前为止，我尝试的是使用-moz-prefix添加动画属性（动画和关键帧）。问题是，例如，当我将@-moz关键帧loadbar{…}放在@-webkit关键帧loadbar{…}之前时，动画在Firefox中工作，但在Chrome和Safari中不工作。如果我再次更改代码的位置，它在Chrome和Safari中工作，但在Firefox中不工作，即使我有@-moz关键帧加载栏{…}。我怎样才能解决这个问题？我觉得Chrome、Safari和Firefox正在为我把前缀名放在哪里而争吵。下面是不带-moz-前缀的代码

#progresscontainer{
边缘顶部：15px；
宽度：100%；
文本对齐：居中；
}
#进度条{
背景色：#2C3E50；
边界半径：1px；
填充：3倍；
宽度：500px；
左边距：自动；
右边距：自动；
}
#进步酒吧部{
背景色：#E74C3C；
高度：10px；
宽度：0%；
边界半径：1px；
-webkit动画：加载条4s；
动画：加载条2s；
-webkit动画填充模式：正向；
动画填充模式：正向；
-webkit动画延迟：3s；
动画延迟：3s；
}
@-webkit关键帧加载栏{
0% {
宽度：0%；
}
100% {
宽度：3.5%；
}
@关键帧加载条{
0% {
宽度：0%；
}
100% {
宽度：3.5%；
}

进度

您还需要

@-moz-keyframes loadbar{
    0% {
        width: 0%;
    }

   100% {
        width: 3.5%;
    }
}

此外，还需要在关键帧之后关闭括号：

@-webkit-keyframes loadbar {

   0% {
       width: 0%;
   }

   100% {
       width: 3.5%;
   }
}


@keyframes loadbar {

   0% {
       width: 0%;
   }

   100% {
       width: 3.5%;
   }
}

---

请记住，IE和old Opera还有@ms关键帧和@o关键帧。

您还没有用

}

关闭关键帧声明，请参见…嗯..值得学习的是，缺少a}会使代码工作或中断：）