Question

反弹效果在firefox中是生涩的。当我不断刷新页面时，有时会产生效果，有时则不会。但无论哪种方式，生涩的反弹。虽然镀铬都很好。
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

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

Firefox中的一个问题是，在某一点上有一个水平滚动条，这会导致窗口的垂直尺寸发生短暂变化。

解决方案：给{{1} } overflow-x:hidden。
您在body和-webkit-前缀渐变中没有相同的颜色。

解决方法：确保颜色相同，和/或在前缀之后添加一个没有前缀的-moz-。

＆＃13;

radial-gradient

＆＃13;

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;
}

＆＃13;

（或updated fiddle）。

顺便说一下，没有<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>。

Animate.css无法在firefox中运行

1 个答案: