CODEWITHSUNDEEP
cssgoogle-chromefirefox
Zip
Zip

Reputation: 5592

css animation work in chrome and safari not in mozilla

I am a CSS newbie. How can I make this css animation to work in both Firefox and Chrome. Right now it's working in Chrome and Safari but not in Firefox.

What I have tried so far is that I added the animation properties(animation and keyframes) with -moz- prefix. The problem is that when I put, for example, @-moz-keyframes loadbar{.....} first before @-webkit-keyframes loadbar{..}, then the animation works in Firefox but not in Chrome and Safari. If I change the placing of the code again, it works in Chrome and Safari but not in Firefox even if I have @-moz-keyframes loadbar{...}. How can I solve this problem? I feel like Chrome, Safari and Firefox are fighting over where I put the code with their prefix name first. Below is the code without -moz- prefix.

#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>

Upvotes: 0

Views: 247

Answers (1)

Rence
Rence

Reputation: 2950

You will also need 

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

   100% {
        width: 3.5%;
    }
}

also you need to close your brackets after your keyframes:

@-webkit-keyframes loadbar {

   0% {
       width: 0%;
   }

   100% {
       width: 3.5%;
   }
}


@keyframes loadbar {

   0% {
       width: 0%;
   }

   100% {
       width: 3.5%;
   }
}

Remember there is also @-ms-keyframes and @-o-keyframes for IE and old Opera.

Upvotes: 0

Related Questions