Animate.css not working in firefox

Question

http://jsfiddle.net/xmesop57/

1. 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.
2. 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.)

1. 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.

2. 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.