IE9的CSS3動畫

目前正在使用我自定義的jquery插件，它只需要運行jquery。IE9的CSS3動畫

我不想包含額外的第三方jQuery插件。

我有一個CSS3動畫運行在我的搜索按鈕，當點擊時，除了ie9工作正常。 CSS如下：

.loader { 
    display: block; 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #fff; 
    outline:none; 
    -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    font-size:0; 
    line-height:0 
} 

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
} 
@keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
}

但它不工作在IE9，是一個純CSS的解決方案，我可以在IE9中做到這一點工作？

來源

2015-09-24 StevieB

很抱歉，但動畫不是在IE9支持。 http://caniuse.com/#feat=css-animation與CSS運氣不佳！ –

有沒有什麼辦法可以爲CSS中的IE9做一個回退 – StevieB

您可以使用'-ms-'前綴爲轉換做一個回退，但CSS動畫沒有任何回退的IE9。 –

IE9或更低版本不支持動畫，轉換和轉換。 IE 10+支持他們，但即使在這種情況下，用戶在使用IE時也會遇到很多問題。最好的做法是使用JavaScript。使用JavaScript，您可以避免使用CSS3 animations，即使在IE中也可以更好地運行結果。

對於在瀏覽器的兼容性尋找animations, transitions and transformations看看這個鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility

來源

2015-09-25 14:34:35

回答

相關問題