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动画工作在铬和野生动物园不在mozilla

1 个答案: