CSS3動畫變換旋轉在Firefox中不起作用

我在codepen.io中發現了這個動畫。一切工作正常，但當我在Firefox中測試它的動畫不起作用。CSS3動畫變換旋轉在Firefox中不起作用

該代碼已經有瀏覽器前綴，所以我不知道什麼是不工作在FF。

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.loading { 
    margin-left:auto; 
    margin-right:auto; 
    display:table; 
    border-width:30px; 
    border-radius:50%; 
    -webkit-animation:spin 1s linear infinite; 
    -moz-animation:spin 1s linear infinite; 
    -o-animation:spin 1s linear infinite; 
    animation:spin 1s linear infinite; 
} 
.style-1 { 
    border-style:solid; 
    border-color:#001e60 transparent 
} 
.style-2 { 
    border-style:double; 
    border-color:#001e60 transparent; 
} 
.style-3 { 
    border-style:double; 
    border-color:#001e60 #fff #fff; 
} 
@-webkit-keyframes spin { 
    100% { 
     -webkit-transform:rotate(359deg); 
    } 
} 
@-moz-keyframes spin { 
    100% { 
     -moz-transform:rotate(359deg); 
    } 
} 
@-o-keyframes spin { 
    100% { 
     -moz-transform:rotate(359deg); 
    } 
} 
@keyframes spin { 
    100% { 
     transform:rotate(359deg); 
    } 
} 
</style> 
</head> 
<body> 

<div style="display: block;" class="loading-container"> 
     <span id="loadingIndicator" class="loading style-3"></span> 
    </div> 

</body> 
</html>

來源

2015-11-05 Pinoy2015

問題是具有.loading使用display: table;而不實際指定寬度或高度。使用這樣的表來暗示大小是有點哈克。 Chrome瀏覽器的解釋方式與Firefox不同。最好用css明確地給它一個大小。嘗試將其與寬度和高度像這樣改變的塊：

.loading { 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
    border-width:30px; 
    border-radius:50%; 
    height: 5px; 
    width: 5px; 
    -webkit-animation:spin 1s linear infinite; 
    -moz-animation:spin 1s linear infinite; 
    -o-animation:spin 1s linear infinite; 
    animation:spin 1s linear infinite; 
}

BIN：https://jsbin.com/nedanayopu/edit?html,output

來源

2015-11-05 04:46:39 Josh

CSS3動畫變換旋轉在Firefox中不起作用

回答

相關問題