IE11 css animations with crazy timing function

Question

For some reason all animations on my site that work perfectly on firefox/chrome/edge have some crazy timing on IE11.

The animation as it's intended: http://sendvid.com/52jn0saf

The animation on IE11: http://sendvid.com/vt6mk9pm I tried changing animation-timing-function, I tried adding animation-delay 0, but nothing works.

The animation of scrolling in:

.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);
    }
}

Also, is there even a way to inspect animations in IE/Edge dev tool like in other, saner browsers?

There is a bug animating a transform in IE when vh units are used (or vw) — vals, Nov 18 '16 at 17:04

score 0 · Answer 1 · answered Nov 18 '16 at 16:11

It may be due to you missing out the IE vendor prefix for transform:

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

You can install Firebug on IE to inspect

IE11 css animations with crazy timing function

1 Answers1