IE11 css animations avec fonction de timing fou

Question

Pour une raison quelconque, toutes les animations sur mon site qui fonctionnent parfaitement sur firefox/chrome/edge ont un timing fou sur IE11.

L'animation comme il est prévu: http://sendvid.com/52jn0saf

L'animation sur IE11: http://sendvid.com/vt6mk9pm J'ai essayé de changer l'animation-timing-function, j'ai essayé d'ajouter l'animation retard 0, mais rien ne fonctionne.

L'animation de défilement dans:

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

Aussi, est-il même un moyen d'inspecter des animations dans l'outil IE/Edge dev comme dans d'autres, les navigateurs Saner?

Answer 1

Il peut être dû à vous manquer le préfixe fournisseur IE pour transform:

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

Vous pouvez installer Firebug sur IE pour inspecter