IE10 - 頁面加載延遲CSS動畫

我創建了一個動畫淡出DIV，然後縮小到什麼都沒有（因爲我不能使用display：none;在動畫中）。 Google Chrome和FireFox中的動畫效果很好，但在Internet Explorer 10中，該頁面似乎停止加載，直到動畫完成。所以通常情況下，DIV應該在頁面加載期間與其他所有內容一起出現，然後在3秒延遲後，它應該淡出並縮小，以便頁面的其餘部分向上滑動以填充空白區域。但是，在IE10中，DIV出現了，但DIV下面的其餘內容不會......只是空白空白。幾秒鐘後，內容隨着DIV開始淡出而加載。起初，我認爲'動畫延遲：3s'延遲了加載頁面，所以我試着改變我的動畫不使用延遲，而是更多的關鍵幀沒有改變第一個0-66％的DIV，然後66-88會淡出，88-100會縮小。這並沒有解決這個問題，這個新的動畫在Chrome/Firefox中再次正常工作，但IE10的問題相同。IE10 - 頁面加載延遲CSS動畫

以下是我的代碼。我知道一個解決方案是隱藏div，然後在頁面加載時，我可以用JavaScript修改CSS以顯示DIV並添加帶有動畫的類...但是，我只想用CSS解決此問題，因爲這個動畫用在我正在開發的所有Web應用程序中，所以如果我們使用javascript，它會爲使用動畫的任何人添加工作。

使用Asp.Net MVC 4剃刀意見，.NET 4.5，並引導CSS

NOTE: I used Visual Studio w/ Web Essentials to copy vendor specifics, so all the vendor specific CSS has identical values for everything. 

.successFadeOut { 
    display: block !important; 
    animation: successFadeOutAnimation; 
    animation-duration: 1.5s; 
    animation-delay: 3s; 
    animation-fill-mode: forwards; 
} 

@keyframes successFadeOutAnimation { 
    0% { 
     opacity: 1; 
     height: auto; 
     padding-top: 8px; 
     padding-bottom: 8px; 
     margin-top: 0px; 
     margin-bottom: 20px; 
     line-height: 20px; 
    } 

    70% { 
     opacity: 0; 
     height: auto; 
     padding-top: 8px; 
     padding-bottom: 8px; 
     margin-top: 0px; 
     margin-bottom: 20px; 
     line-height: 20px; 
    } 

    100% { 
     opacity: 0; 
     height: 0px; 
     padding-top: 0px; 
     padding-bottom: 0px; 
     margin-top: 0px; 
     margin-bottom: 0px; 
     line-height: 0px; 
    } 
}

來源

2013-05-16 Grymlot

在你的類中添加以下代碼IE .successFadeOut

-ms-animation-duration:1s; 
    animation-timing-function: linear;

來源

2013-11-14 07:26:27

IE10 - 頁面加載延遲CSS動畫

回答

相關問題