CSS анимация не работает в IE, но работает в Chrome и Firefox? - PullRequest
Новая
       7

CSS анимация не работает в IE, но работает в Chrome и Firefox?

0 голосов
/ 14 сентября 2018

У меня есть слайд-шоу из 4 изображений, в то время как анимация загрузки страницы должна исчезнуть влево, а затем остановиться.Следующий код работает в Chrome, Safari и Firefox, но не в IE.Буду признателен за любую помощь!

HTML: 

<div class="teaser-large image-loaded">
    <img src="image_01.jpg" />
</div>

CSS3: 

@keyframes fadeLeft {
    from {
        transform: translate3d(-3%,0,0);
        -webkit-transform: translate3d(-3%,0,0);
        -moz-transform: translate3d(-3%,0,0);
        -ms-transform: translate3d(-3%,0,0);
        opacity: 0;
    }
    to {
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        opacity: 1;
    }
}

.teaser-large {
    opacity: 0;
    -webkit-animation: fadeLeft 700ms ease-in-out;
    animation: fadeLeft 700ms ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.image-loaded {
   -webkit-animation-play-state: paused;
   animation-play-state: paused; 
}
...