Animate.css not working in firefox - css

Question

http://jsfiddle.net/xmesop57/
The bounce in effect is jerky in firefox. When I keep refreshing the page, sometimes the effect applies and sometimes it doesn't. But either ways, the bounce in jerky. All fine in chrome though.
There is a huge color difference between chrome and firefox. Why is it. Can this be fixed. My expected color is as seen in firefox.
HTML
<div class="container-fluid">
<div class="row-fluid radial-center">
<div class="centering text-center col-lg-3 clearfix">
<div class="animated bounceInLeft">
<input type="text" class="textbox" id="txtUsername" />
</div>
</div>
</div>
</div>
CSS
.radial-center {
/* fallback */
background-color: #413636;
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#370237), to(#413636));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #490338, #121211);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #D52B48, #413636);
/* IE 10 */
background: -ms-radial-gradient(circle, #D52B48, #413636);
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
#-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
-moz-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
-moz-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-moz-transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
-moz-animation-name:bounceInLeft;
}

Answer 1

You have two problems. (Those should have been two different questions, really.)
A problem in Firefox is that there's a horizontal scrollbar at one point, which causes the vertical size of the window to change briefly.Solution: give overflow-x:hidden to body.
You don't have the same colours in the -webkit- and -moz- prefixed gradients.Solution: make sure the colours are the same, and/or add an unprefixed radial-gradient after the prefixed ones.
html, body {
height:100%;
margin:0;
padding:0;
overflow-x:hidden; /* here */
}
.container-fluid {
height:100%;
display:table;
width: 100%;
padding:0;
}
.container-fluid:after {
content:none;
}
.container-fluid:before {
content:none;
}
.row-fluid {
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering {
float:none;
margin:0 auto;
padding:10px;
}
.col-lg-3 {
text-align:center;
}
.radial-center {
/* fallback */
background-color: #413636;
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#D52B48), to(#413636)); /* corrected colours */
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #D52B48, #413636); /* corrected colours */
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #D52B48, #413636);
/* modern browsers */
background: radial-gradient(circle, #D52B48, #413636); /* removed -ms- */
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
#-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
-moz-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
-moz-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-moz-transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
-moz-animation-name:bounceInLeft;
}
<div class="container-fluid">
<div class="row-fluid radial-center">
<div class="centering text-center col-lg-3 clearfix">
<div class="animated bounceInLeft">
<input type="text" class="textbox" id="txtUsername" />
</div>
</div>
</div>
</div>
(Or, updated fiddle).
By the way, there is no -ms-radial-gradient.