미친 타이밍 기능이있는 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/에지 개발 도구에 애니메이션을 검사 할 경우에도 방법은 무엇입니까?

Answer 1

이 때문에 당신을위한 IE 공급 업체 접두사를 누락 될 수있다 변환 :

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

당신은