在IE中搖擺不定的css spinner關鍵幀動畫

我曾經見過幾個人在IE中出現「搖擺不定」的旋轉動畫問題，大部分時間都是使用圖片而不是動畫邊框，但這不適用於因爲img在IE中加載時間過長，不能及時顯示。（網站已經開始重裝，沒有微調將在所有顯示）。因此，我想問，如果任何人有固定在我公司使用的代碼（少）另一個想法：在IE中搖擺不定的css spinner關鍵幀動畫

@keyframes spinAround { 
    from { 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    to { 
    -moz-transform: rotate(359deg); 
    -ms-transform: rotate(359deg); 
    -webkit-transform: rotate(359deg); 
    transform: rotate(359deg); 
    } 
} 

.is-loading { 
    display: inline; 
    position: absolute; 
    top: 50%; 
    box-sizing: inherit; 

    &::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(255, 255, 255, .8); 
    box-sizing: inherit; 
    } 

    &::after { 
    height: 12px; 
    width: 12px; 
    margin-left: -10px; 
    margin-top: -10px; 
    border-width: 4px; 
    border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4); 
    top: 50%; 
    content: ""; 
    display: block; 
    position: absolute; 
    border-style: solid; 
    border-radius: 50%; 
    animation: spinAround 700ms infinite linear; 
    box-sizing: inherit; 

    } 
}

我再簡單地切換在div上課。在Chrome或FF中完美工作，但可能是由於IE邊界半徑問題在IE中跳躍/顛簸。

感謝提前任何想法:)

來源

2017-08-15 Silaithil

i不知道這是否能解決你的問題，但我曾經有過類似IE的問題，幫助我的是在你的關鍵幀中添加幾個步驟來完成旋轉。 – rebecca

感謝您的想法，只是嘗試過，但不幸的是，添加步驟似乎沒有幫助。 – Silaithil

加入這一行的關鍵幀：

-ms-transform-origin: 100%;

這樣的：

from { 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -ms-transform-origin: 100%; 
    }

如果你是一個旋轉一圈可能是你應該使用此行：

-ms-transform-origin: 50% 50%;

來源

2017-12-13 21:55:13

在IE中搖擺不定的css spinner關鍵幀動畫

回答

相關問題