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

Question

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

到目前为止，我尝试过的是添加带有 -moz- 前缀的动画属性(动画和关键帧)。问题是，例如，当我将 @-moz-keyframes loadbar{.....} 首先放在 @-webkit-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。