在IE中的CSS旋轉是「緊張」

我創建了一個按預期工作的CSS3動畫，但在Internet Explorer上，旋轉非常緊張。在IE中的CSS旋轉是「緊張」

我創建了一個微調器加載指示器，因此我使用CSS動畫來做transform: rotate(...);。在Chrome瀏覽器和其他瀏覽器上，旋轉非常平滑，但在Internet Explorer上，它顯得稍微搖擺不定。

我試着設置transform-origin: center，嘗試使用直接像素值而不是em單位和各種其他的東西，但似乎沒有任何工作。

關於如何改進此動畫的任何想法？

如果我將「軌跡」（border-color）作爲象限在完全透明時旋轉，它會使效果不太明顯，但我想我會詢問是否有人有任何想法。

.loading { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    height: 1em; 
 
    width: 1em; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    -webkit-animation: loading 1s infinite linear; 
 
    -moz-animation: loading 1s infinite linear; 
 
    animation: loading 1s infinite linear; 
 
    border-left: 0.25em solid rgba(0, 0, 0, .3); 
 
    border-right: 0.25em solid rgba(0, 0, 0, .3); 
 
    border-bottom: 0.25em solid rgba(0, 0, 0, .3); 
 
    border-top: 0.25em solid rgba(0, 0, 0, .8); 
 
    border-radius: 100%; 
 
    vertical-align: middle; 
 
    margin: 0 0.5em; 
 
} 
 

 
.loading * { display: none; } 
 
@keyframes loading { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } 
 
@-moz-keyframes loading { from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); } } 
 
@-webkit-keyframes loading { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }

<div class="loading"></div>

來源

2016-01-04 Quantastical

在這個問題上的顯着答案在第一編輯一個非常好的解決方案 - 這讓我出很好（沙CSS）http://stackoverflow.com/questions/4617220/css-rotate-property-in -ie –

感謝@AndrewAdam的反饋。我會在某個時候回顧一下cssSandpaper插件，看看它是否可行。如果我們認爲需要支持<= IE8的話，似乎可能會有所幫助，但我仍然很想知道是否有解釋爲什麼CSS transform屬性不是那麼好。 – Quantastical

我相信這在變換中不是問題。過去我曾經見過類似的問題，真正的原因是這個圈子不是**輪。你不會注意到它在一個靜止的圓圈內，但是當你旋轉時它是顯而易見的。 – vals

所以，我最終使用256x256的透明PNG複製的效果，而無需使用CSS邊框，由於IE瀏覽器不能夠呈現完美的圓形與border-radius。

.loading { 
    display: inline-block; 
    font-size: 20px; 
    height: 1em; 
    width: 1em; 
    margin: 0 auto; 
    position: relative; 
    -webkit-animation: loading 1s infinite linear; 
    -moz-animation: loading 1s infinite linear; 
    animation: loading 1s infinite linear; 

    /* 
    **border-left: 0.25em solid rgba(0, 0, 0, .3); 
    **border-right: 0.25em solid rgba(0, 0, 0, .3); 
    **border-bottom: 0.25em solid rgba(0, 0, 0, .3); 
    **border-top: 0.25em solid rgba(0, 0, 0, .8); 
    */ 
    background-image: url(../images/loading.png); 
    background-size: 100% 100%; 

    border-radius: 100%; 
    vertical-align: middle; 
    margin: 0 0.5em; 
}

來源

2016-01-20 16:32:05 Quantastical

在IE中的CSS旋轉是「緊張」

回答

相關問題