html - 具有疯狂计时功能的 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进行检查