带有疯狂计时功能的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的检查