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 来检查