Firefox中的按鈕微調器不能在Chrome中旋轉

Question

單擊按鈕啓動AJAX調用時，按鈕中將顯示微調器。當AJAX回調函數完成時，微調器被移除。像FireFox 29中的冠軍一樣旋轉，Chrome 34.0.1847.132中沒有動畫。該圖標顯示然後隱藏，但不旋轉。

.spinner { 
    position: absolute; 
    left: 2vw; 
    top: 2; 
    opacity: 0; 
    max-width: 0; 
    -webkit-transition: opacity 0.25s, max-width 0.45s; 
    -moz-transition: opacity 0.25s, max-width 0.45s; 
    -o-transition: opacity 0.25s, max-width 0.45s; 
    transition: opacity 0.25s, max-width 0.45s; 
} 

.has-spinner.active { 
    cursor:progress; 
} 

.has-spinner.active .spinner { 
    opacity: 1; 
    max-width: 50px; 
} 

.icon-refresh-animate { 
    animation-name: rotateThis; 
    animation-duration: .5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 

@keyframes rotateThis { 
from { transform: scale(1) rotate(0deg); } 
to { transform: scale(1) rotate(360deg); } 
} 

@-webkit-keyframes rotateThis { 
    from { transform: scale(1) rotate(0deg); } 
    to { transform: scale(1) rotate(360deg); } 
} 

感謝您的期待。

Answer 1

您應該爲animation和transform添加-webkit供應商前綴，以使其適用於Chrome和Safari。檢查這篇文章：http://css3.bradshawenterprises.com/which-vendor-prefixes-are-needed/。所以，你的CSS應該是這樣的：

.icon-refresh-animate { 
    -webkit-animation-name: rotateThis; 
    -webkit-animation-duration: .5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit animation-timing-function: linear; 
    animation-name: rotateThis; 
    animation-duration: .5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 

@-webkit-keyframes rotateThis { 
    from { -webkit-transform: scale(1) rotate(0deg); } 
    to { -webkit-transform: scale(1) rotate(360deg); } 
} 

和短DEMO這表明它在Chrome中加入-webkit供應商名稱纔有效。