帶有瘋狂計時功能的IE11 css動畫

Question

出於某種原因，我的網站上的所有動畫在firefox/chrome/edge上完美運行，在IE11上都有一些瘋狂的計時。

，因爲它的預期動畫：http://sendvid.com/52jn0saf

對IE11的動畫：http://sendvid.com/vt6mk9pm 我試圖改變動畫定時功能，我嘗試添加動畫延遲0，但沒有任何工程。

在滾動的動畫：

.step__hidden{ 
    top: -100vh; 
} 

.step__active{ 
    animation: scrollIn 1s ease-in-out 0s; 
    top: 0; 
} 


@keyframes scrollIn{ 
    0%{ 
     transform: translateY(-100vh); 
    } 
    100%{ 
     transform: translateY(0); 
    } 
} 

此外，有沒有連方式外，更理智的瀏覽器檢查在IE /邊開發工具的動畫是怎樣的？

Answer 1

它可能是由於你錯過了爲IE供應商名稱變換：

@keyframes scrollIn{ 
    0%{ 
     -ms-transform: translateY(-100vh); 
     transform: translateY(-100vh); 
    } 
    100%{ 
     -ms-transform: translateY(-100vh); 
     transform: translateY(0); 
    } 
} 

您可以在IE瀏覽器安裝Firebug的檢查