CSS3關鍵幀淡入和淡出動畫在IE上不起作用

Question

關鍵幀就跟它們一樣基本。

.fadeIn {  
    animation: fadeIn 500ms linear 0s 1 normal forwards running; /* Modern browsers */
}
.fadeOut {
    animation: fadeOut 150ms linear 0s 1 normal forwards running; /* Modern browsers */
}

/* Modern browsers */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

關鍵幀可在所有其他瀏覽器中使用，甚至適用於移動瀏覽器。 我省略了其他瀏覽器（-webkit，-moz，-o）的前綴。

為什么IE再一次拉扯我的鎖鏈？ 它不適用於所有兼容（IE 10+）版本的IE。

這是JSFiddle

Answer 1

看來IE不喜歡速記中的animation-play-state值，因此請拆分它們

Src： https ：//msdn.microsoft.com/zh-CN/library/hh772212（ v = vs.85） .aspx

.fadeIn {  
    animation-play-state: running;
    animation: fadeIn 500ms linear 0s 1 normal forwards;
}
.fadeOut {
    animation-play-state: running;
    animation: fadeOut 150ms linear 0s 1 normal forwards;
}

堆棧片段

 function fadeOut(e) { var div = document.getElementById('fading'); div.classList.remove('fadeInit'); div.classList.remove('fadeIn'); div.classList.add('fadeOut'); } function fadeIn() { var div = document.getElementById('fading'); div.classList.remove('fadeInit'); div.classList.remove('fadeOut'); div.classList.add('fadeIn'); } fadeIn(); setTimeout(function() { fadeOut(); }, 1000); 

 /**************** * ANIMATIONS * ****************/ /* Animation initializer */ .fadeIn { animation-play-state: running; animation: fadeIn 500ms linear 0s 1 normal forwards; /* Modern browsers */ } .fadeOut { animation-play-state: running; animation: fadeOut 150ms linear 0s 1 normal forwards; /* Modern browsers */ } /* IE 10 / Chrome */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } 

 <div id="fading" style="background: black; width: 100px; height: 100px" />