Css-анимация не работает в Internet Explorer, изменяя непрозрачность

Css-анимация не работает в Internet Explorer, версия 11 точно. Все другие браузеры оживляют его отлично. Вот сайт: http://susannahpryce.esy.es Css-анимация не работает в Internet Explorer, изменяя непрозрачность

Я проверил через поджигатель в IE, он считывает код с не erroers, поэтому я не знаю, почему это не работает, я использую IE 11.

И вот мой код

body .main .header-box { 
    background-color: #fff; 
    height: 500px; 
    width: 100%; 
    float: left; } 
    body .main .header-box .slide-area { 
     margin: 0 9%; } 
     body .main .header-box .slide-area #pic1 { 
     position: absolute; 
     z-index: 5; 
     -webkit-animation-duration: 60s; 
     -webkit-animation-delay: 10s; 
     -webkit-transition-timing-function: ease; 
     -webkit-animation-name: slide-fade; 
     -webkit-animation-iteration-count: infinite; 
     -ms-animation-duration: 60s; 
     -ms-animation-delay: 10s; 
     -ms-transition-timing-function: ease; 
     -ms-animation-name: slide-fade; 
     -ms-animation-iteration-count: infinite; 
     -moz-animation-duration: 60s; 
     -moz-animation-delay: 10s; 
     -moz-transition-timing-function: ease; 
     -moz-animation-name: slide-fade; 
     -moz-animation-iteration-count: infinite; } 
     body .main .header-box .slide-area #pic2 { 
     position: absolute; 
     z-index: 4; 
     -webkit-animation-duration: 60s; 
     -webkit-animation-delay: 20s; 
     -webkit-transition-timing-function: ease; 
     -webkit-animation-name: slide-fade; 
     -webkit-animation-iteration-count: infinite; 
     -ms-animation-duration: 60s; 
     -ms-animation-delay: 20s; 
     -ms-transition-timing-function: ease; 
     -ms-animation-name: slide-fade; 
     -ms-animation-iteration-count: infinite; 
     -moz-animation-duration: 60s; 
     -moz-animation-delay: 20s; 
     -moz-transition-timing-function: ease; 
     -moz-animation-name: slide-fade; 
     -moz-animation-iteration-count: infinite; } 
     body .main .header-box .slide-area #pic3 { 
     position: absolute; 
     z-index: 3; 
     -webkit-animation-duration: 60s; 
     -webkit-animation-delay: 30s; 
     -webkit-transition-timing-function: ease; 
     -webkit-animation-name: slide-fade; 
     -webkit-animation-iteration-count: infinite; 
     -ms-animation-duration: 60s; 
     -ms-animation-delay: 30s; 
     -ms-transition-timing-function: ease; 
     -ms-animation-name: slide-fade; 
     -ms-animation-iteration-count: infinite; 
     -moz-animation-duration: 60s; 
     -moz-animation-delay: 30s; 
     -moz-transition-timing-function: ease; 
     -moz-animation-name: slide-fade; 
     -moz-animation-iteration-count: infinite; } 
     body .main .header-box .slide-area #pic4 { 
     position: relative; 
     z-index: 2; } 
    @-webkit-keyframes slide-fade { 
    0% { 
    opacity: 1; } 
    5% { 
    opacity: 0; } 
    50% { 
    opacity: 0; } 
    55% { 
    opacity: 1; } 
    100% { 
    opacity: 1; } } 
    @-ms-keyframes slide-fade { 
    0% { 
    opacity: 1; } 
    5% { 
    opacity: 0; } 
    50% { 
    opacity: 0; } 
    55% { 
    opacity: 1; } 
    100% { 
    opacity: 1; } } 
    @-moz-keyframes slide-fade { 
    0% { 
    opacity: 1; } 
    5% { 
    opacity: 0; } 
    50% { 
    opacity: 0; } 
    55% { 
    opacity: 1; } 
    100% { 
    opacity: 1; } }

источник

2015-07-09 Matvey Nevazhno

Замечательно, что у вас есть префиксы браузера, но вы всегда должны включать нормальное правило. Пример 'animation-duration: 60s;' – Huangism

Насколько я знаю, IE больше не использует префиксы для анимации ... если когда-либо - http://caniuse.com/#search=css-animation –

Также обратите внимание на ' IE10 и IE11 не поддерживают анимацию CSS внутри медиа-запросов. «Это на вкладке известных проблем ссылки Paulie_D. Ваша анимация для этого находится внутри медиа-запросов. Попытайтесь извлечь анимацию css из медиа-запроса и посмотреть, работает ли она. Изображения не ожидают меня для IE 11 – Huangism

Возьмите анимацию css из медиа-запроса. Я сделал простую копию и вставлю и немного отредактировал css, чтобы заставить его работать. Как указано здесь http://caniuse.com/#search=css-animation (благодаря Paulie_D) в известной вкладке вопросы

IE10 и IE11 не поддерживает CSS-анимации внутри запросов СМИ.

http://jsfiddle.net/xmfj0tk7/

<div class="header-box"> 
     <div class="slide-area"> 
     <img id="pic1" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-1-optimized.jpg" /> 
     <img id="pic2" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-2-optimized.jpg" /> 
     <img id="pic3" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-3-optimized.jpg" /> 
     <img id="pic4" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-4-optimized.jpg" /> 
     </div> 

     <div class="slide-area_480"> 
     </div> 

     <div class="slide-area_640"> 
     </div> 

    </div>

Вы также должны поставить нормальные правила CSS в файле, как без префиксов. Современным браузерам не нужны префиксы и в будущем, префиксы должны уйти в какой-то момент ... для этого анимационного материала в любом случае

источник

2015-07-09 20:40:14 Huangism

Большое вам спасибо, работает отлично! –

исторически IE не применяется несколько стилей к элементам, которые не «имеют расположение.»

см: http://www.satzansatz.de/cssd/onhavinglayout.html

Here вопрос, который был задан вопрос о непрозрачности в IE.

источник

2015-07-09 20:20:17

спасибо! всегда хорошо знать больше об IE –

Css-анимация не работает в Internet Explorer, изменяя непрозрачность

ответ

Смежные вопросы