我用css創建了一個簡單的加載程序。它在Chrome中正常工作，但在Firefox中也不工作。css動畫在Firefox中不起作用？
https://jsfiddle.net/sunilmadaan07/4dcaLegc/
守則如下：
HTML：
<div class='container'>
<div class='loader'>
<div class='loader--text'></div>
</div>
</div>
Content動畫在幾乎所有的瀏覽器不能正常工作。你可以使用插件進行如下操作。
$("#randomArea").Loadingdotdotdot({
"speed": 400,
"maxDots": 5,
"word": "Loading"
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/Loadingdotdotdot/js/jquery.loadingdotdotdot.js"></script>
<div id="randomArea" style="position: relative;">done!</div>嘿，你可以使用普通的JS實現的效果，但我已經使用jQuery的..
jQuery的
// Simpler, does exactly the same thing:
var i=1;
var txt="Loading";
function go() {
console.log(i);
$('.loader--text').text(txt);
i++;
txt+=".";
if(i==5)
{
txt="Loading";
i=1;
}
setTimeout(go,1000);
}
go();
的jsfiddle鏈接： https://jsfiddle.net/4dcaLegc/5/
問題是animation與:after僞Firefox中是不支持，這就是爲什麼我改變你的一些代碼從content一個墊料width父元素。
檢查下面的代碼片段：
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader {
height: 20px;
width: 80px;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader-text {
position: absolute;
top: 500%;
left: 0;
right: 0;
width:64px;
overflow:hidden;
animation: loadertext 3s infinite;
-moz-animation:loadertext 3s infinite;
}
@-moz-keyframes loadertext {
0% {
width:64px;
}
35% {
width:68px;
}
60% {
width:72px;
}
100% {
width:75px;
}
}
@keyframes loadertext {
0% {
width:64px;
}
35% {
width:68px;
}
60% {
width:72px;
}
100% {
width:75px;
}
}
.loader-text:after {
content: "Loading...";
font-weight: bold;
display:block;
}<div class='container'>
<div class='loader'>
<div class='loader-text'></div>
</div>
</div>
我在Chrome（雖然是舊版本的V43），但它不工作。 – Harry
它在我身邊的鉻上工作的很好。 –
檢查瀏覽器支持在這裏 - https://css-tricks.com/animating-the-content-property/看起來像動畫的內容在大多數瀏覽器不起作用（他們說，即使在Chrome瀏覽器它只能從V46 ，所以解釋了爲什麼它不適用於我的Chrome）。 – Harry