- 在 Firefox 中,跳动实际上是不稳定的。当我不断刷新页面时,有时效果适用,有时则不适用。但无论哪种方式,反弹都是不稳定的。不过在 Chrome 中一切都很好。
- 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;
}
最佳答案
你有两个问题。 (这应该是两个不同的问题,真的。)
Firefox 的一个问题是在某一点有一个水平滚动条,这会导致窗口的垂直尺寸短暂变化。
解决方法:给overflow-x:隐藏
到body
。您在
-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
。
关于css - Animate.css 在 Firefox 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32806099/