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

Question

我是 CSS 新手。我怎样才能让这个 css 动画同时在 Firefox 和 Chrome 中工作。现在它可以在 Chrome 和 Safari 中使用，但不能在 Firefox 中使用。

到目前为止我尝试过的是我添加了带有 -moz- 前缀的动画属性（动画和关键帧）。问题是，例如，当我在@-webkit-keyframes loadbar {..}之前首先放置@-moz-keyframes loadbar {..}时，动画在Firefox中有效但在Chrome 和 Safari。如果我再次更改代码的位置，它在 Chrome 和 Safari 中有效，但在 Firefox 中无效，即使我有 @-moz-keyframes loadbar{...}。我怎么解决这个问题？我觉得 Chrome，Safari 和 Firefox 正在争夺我把带有前缀名称的代码放在哪里。下面是没有 -moz- 前缀的代码。

#progresscontainer {
 margin-top: 15px;
 width: 100%;
 text-align: center;
}

#progressbar {
      background-color: #2C3E50;
      border-radius: 1px;
      padding: 3px;
      width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

    #progressbar div {
       background-color: #E74C3C;
       height: 10px;
       width:0%;
       border-radius: 1px;
       -webkit-animation:loadbar 4s;
       animation:loadbar 2s;
       -webkit-animation-fill-mode: forwards;
       animation-fill-mode: forwards;
       -webkit-animation-delay: 3s;
       animation-delay: 3s;
    }

    @-webkit-keyframes loadbar {

    0% {
        width: 0%;
    }

    100% {
        width: 3.5%;
    }

    
    @keyframes loadbar {

    0% {
        width: 0%;
    }

    100% {
        width: 3.5%;
    }

<div id="progresscontainer">
      <div id="progressbar">
        <div></div>
      </div>
      <p style="color: yellow; font-family: Helvetica; margin-top: 4px; background-color: black;
      opacity: 0.6; width: 150px; margin: 0 auto; margin-top: 3px">Progress</p>
</div>

Answer 1

您还需要

@-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 和旧 Opera 的 @-ms-keyframes 和 @-o-keyframes。

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

css animation work in chrome and safari not in mozilla

css

firefox

google-chrome