具有疯狂计时功能的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 / Edge开发工具中检查动画，就像在其他更流畅的浏览器中一样？

Answer 1

可能是由于您错过了IE供应商的转换前缀：

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

您可以在IE上安装Firebug进行检查