css - Animate.css 在 Firefox 中不工作

Question

http://jsfiddle.net/xmesop57/

1. 在 Firefox 中，跳动实际上是不稳定的。当我不断刷新页面时，有时效果适用，有时则不适用。但无论哪种方式，反弹都是不稳定的。不过在 Chrome 中一切都很好。
2. chrome 和 firefox 之间存在巨大的颜色差异。为什么。这个能修好吗。我预期的颜色与在 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

你有两个问题。 (这应该是两个不同的问题，真的。)

1. Firefox 的一个问题是在某一点有一个水平滚动条，这会导致窗口的垂直尺寸短暂变化。
   
   解决方法:给overflow-x:隐藏到body。

2. 您在 -webkit- 和 -moz- 前缀渐变中没有相同的颜色。
   
   解决方案:确保颜色相同，和/或在有前缀的之后添加无前缀的 radial-gradient。

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>

(或者，updated fiddle)。

顺便说一句，没有-ms-radial-gradient。