Cross-Browser CSS3 Keyframe Animation Firefox

Cross-Browser CSS3 Keyframe Animation Firefox

You need to include the browser-specific keyframe animations with their browser-specific transforms within them

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% {
        -webkit-transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@-moz-keyframes pulsate {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% {
        transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@-ms-keyframes pulsate {
    0% {
        -ms-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% 
        -ms-transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        -ms-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@-o-keyframes pulsate {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% 
        transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@keyframes pulsate {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% {
        transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}

Also, you should add the -ms-animation equivalents to get full browser support.

---

These days, a lot of these can be left out safely. Check out this post to find out which ones you need to include to support your target browsers.

Cross-Browser CSS3 Keyframe Animation Firefox

You need to include the browser-specific keyframe animations with their browser-specific transforms within them

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% {
        -webkit-transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@-moz-keyframes pulsate {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% {
        transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@-ms-keyframes pulsate {
    0% {
        -ms-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% 
        -ms-transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        -ms-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@-o-keyframes pulsate {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% 
        transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}
@keyframes pulsate {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }    
    50% {
        transform: scale(1, 1);
        opacity: 1.0;
    }    
    100% {
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
}

Also, you should add the -ms-animation equivalents to get full browser support.

---

These days, a lot of these can be left out safely. Check out this post to find out which ones you need to include to support your target browsers.

CSS animation won't work in Firefox

select is handled differently between browsers. Pseudoelements are probably best avoided. In your case, the pseudoelement is being applied in Chrome, but not in Firefox.

As an alternative, apply the pseudoelements to a wrapper.

fiddle

.select-wrapper {  position: relative;  width: 300px;  height: 200px;}
.loading {  width: 300px;  height: 200px;}
.select-wrapper:before,.select-wrapper:after {  content: "";  position: absolute;  bottom: 0;  left: 0;  right: 0;  top: 0;  z-index: 1000;  pointer-events: none;  overflow: hidden;}
.select-wrapper:before {  width: 100%;  height: 100%;  background-color: rgba(211, 211, 211, .8);}
.select-wrapper:after {  margin: auto;  width: 32px;  height: 32px;  border: 4px solid #F37324;  border-left-color: transparent;  border-top-color: transparent;  border-radius: 50%;  animation: spin 600ms infinite linear;}
@keyframes spin {  from {    transform: rotate(0deg);  }  to {    transform: rotate(359deg);  }}

<div class="select-wrapper">  <select class="multiselect loading" multiple></select></div>

CSS Animation on Mozilla Firefox

I solved the problem!

In firefox, it's not possible animate the property background

Sorry for the lack of information, my english isn't so good :/

For more informations, see this oficial mozilla page below!

https://bugzilla.mozilla.org/show_bug.cgi?id=1036761

Code below:

.anima-box, .anima-box div {  margin: 0 auto!important;  max-width: 436px;  width: 100%;  height: 400px;}
.anima-box div {  will-change: transform, opacity;  position: absolute;  left: 0;  top: 0;  -webkit-animation-duration: 14s; /* Chrome, Safari, Opera */  animation-duration: 14s;  animation-iteration-count: infinite;  animation-timing-function: ease-in-out;}
.anima-fazer {  -webkit-animation-name: effect-fazer; /* Chrome, Safari, Opera */  animation-name: effect-fazer;  background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat;  opacity: 1.0;}
.anima-evoluir {  -webkit-animation-name: effect-evoluir; /* Chrome, Safari, Opera */  animation-name: effect-evoluir;  background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat;  opacity: 0.0;}
.anima-crescer {  -webkit-animation-name: effect-crescer; /* Chrome, Safari, Opera */  animation-name: effect-crescer;  background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat;  opacity: 0.0;}
.anima-acontecer {  -webkit-animation-name: effect-acontecer; /* Chrome, Safari, Opera */  animation-name: effect-acontecer;  background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat;  opacity: 0.0;}
.anima-acreditar {  -webkit-animation-name: effect-acreditar; /* Chrome, Safari, Opera */  animation-name: effect-acreditar;  background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat;  opacity: 0.0;}
@-webkit-keyframes effect-fazer {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}    5%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   95%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}}
@keyframes effect-fazer {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}    5%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   95%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}}
@-webkit-keyframes effect-evoluir {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   15%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   25%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}
@keyframes effect-evoluir {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   15%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   25%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}
@-webkit-keyframes effect-crescer {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   35%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   45%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}
@keyframes effect-crescer {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   35%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   45%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}
@-webkit-keyframes effect-acontecer {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   55%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   65%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}
@keyframes effect-acontecer {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   55%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   65%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}
@-webkit-keyframes effect-acreditar {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   75%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   85%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}
@keyframes effect-acreditar {    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}   75%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   85%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}}

<div class="anima-box">    <div class="anima-fazer"></div>    <div class="anima-evoluir"></div>    <div class="anima-crescer"></div>    <div class="anima-acontecer"></div>    <div class="anima-acreditar"></div></div>

CSS3 keyframe animation not working in firefox and IE

Remove the double quotes from the animation name (rotate instead of "rotate").

Then it will work:

Running demo

-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:rotate;
-webkit-animation-iteration-count: infinite;

-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:rotate;
-moz-animation-iteration-count: infinite;

-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:rotate;
-ms-animation-iteration-count: infinite;

-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:rotate;
-o-animation-iteration-count: infinite;

animation-duration: 4s;
animation-timing-function: linear;
animation-name:rotate;
animation-iteration-count: infinite;

Remember, the non-prefixed properties must always be the last, after the vendor specific.

P.S: In case you don't know, there are sites that prefix your code at compile-time (like Prefixr), or even at run-time (like prefix-free).

Btw +1, your animation is pretty :)

CSS3 animations working only in Firefox

Actually it works but the duration of the animation is 0 seconds on other browsers, because you did not add a prefix -webkit to work with chrome and Safari.

So it must be

html{
    .....
    animation-duration:1s;
    -webkit-animation-duration: 1s;
}

or you could combine the animation-duration and animation-name in one css property which is animation so it will be

html{
    -webkit-animation: fadeInLeftBig 1s;
    animation: fadeInLeftBig 1s;
}

CSS border animation working in Chrome, Firefox, but not Edge 15/IE 11

It works in IE11 if you define the starting property in the original definition

div {  width: 100px;  height: 100px;  background: red;  position: relative;  -webkit-animation: mymove 5s infinite;  /* Safari 4.0 - 8.0 */  animation: mymove 5s infinite;  border: 9px solid green;  /* this */}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {  0% {    left: 0px;    border: 9px solid green;  }  100% {    left: 200px;    border: 10px solid blue;  }}
@keyframes mymove {  0% {    left: 0px;    border: 9px solid green;  }  100% {    left: 200px;    border: 10px solid blue;  }}

<div></div>

CSS3 Keyframe animation working in chrome, not firefox

The transition property overwrites the animation property in Firefox. This post helped me find the answer

Removing

.nav-bnt div {
    backface-visibility: hidden;
    background-color: #993399;
    height: 3px;
    width: 15px;
    position: absolute;

    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

Becomes

.nav-bnt div {
    backface-visibility: hidden;
    background-color: #993399;
    height: 3px;
    width: 15px;
    position: absolute;

}

JsFiddle: http://jsfiddle.net/u95Lumm3/5/

CSS animation works on Safari and Firefox but not on Chrome

modify second animation-name(without prefix).

Before

-webkit-animation-name: rocketLaunch;
        animation-name: rocket-launch;

After

-webkit-animation-name: rocketLaunch;
        animation-name: rocketLaunch;

please notice difference in animation name.

also,

If you don't care about browser version(cross browser)

I would like to recommend for remove prefix.

Proposal

#rocket {
    position: relative;
    top: 10px;
    animation-name: rocketLaunch;
    animation-duration: 5s;
}

Thank you :)

---

Related Topics