html - 带有疯狂计时功能的IE11 CSS动画

由于某些原因，我网站上所有在Firefox / chrome / edge上完美运行的动画在IE11上都有一些疯狂的时机。

预期的动画：http://sendvid.com/52jn0saf

IE11上的动画：http://sendvid.com/vt6mk9pm
我尝试更改animation-timing-function，尝试添加animation-delay 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开发工具中检查动画？

最佳答案

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

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

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