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
Convert Internal Stylesheet to Inline CSS
Did Chrome 40 Break Justify-Content CSS Overriding
Twitter Bootstrap: White Space on Left and Right Side in Smaller Screen Widths
React Table with Static Header on Browser Scroll
Checking Hardware Acceleration Availability? (Testing Available)
How to Have an Image Placeholder in Angularjs
Do We Need Type="Text/CSS" for <Link> in HTML5
How to Fix Inconsistent Textarea Bottom Margin in Firefox and Chrome
What Is The Rationale Behind Margin-Top: Auto and Margin-Bottom: Auto Amounting to 0 Margin
Make Video Fit 100% with Any Screen Resolution
How to Place The Cursor (Auto Focus) in Text Box When a Page Gets Loaded Without JavaScript Support
Basic CSS - How to Overlay a Div with Semi-Transparent Div on Top
Setting Element Height in Responsive Layout
Make Div Fill Remainder of Page Vertically
Make All Images in Mat-Card-Image Same Size But Scale Correctly