Эффект затухания веб-сайта не работает в обозревателе Internet Explorer

По какой-то причине позиционирование позиционирования моего сайта & отлично смотрится в Chrome & Firefox, но Internet Explorer не показывает эффект затухания вообще, и выравнивание все испортилось. вот кодирование:Эффект затухания веб-сайта не работает в обозревателе Internet Explorer

/* fade slider */ 
.slides { 
    height:600px; 
    margin:0px auto; 
    overflow:hidden; 
    position:relative; 
    width:900px; 
} 
.slides ul { 
    list-style:none; 
    position:relative; 
} 

/* keyframes #anim_slides */ 
@-webkit-keyframes anim_slides { 
    0% { 
     opacity:0; 
    } 
    6% { 
     opacity:1; 
    } 
    24% { 
     opacity:1; 
    } 
    30% { 
     opacity:0; 
    } 
    100% { 
     opacity:0; 
    } 
} 
@-moz-keyframes anim_slides { 
    0% { 
     opacity:0; 
    } 
    6% { 
     opacity:1; 
    } 
    24% { 
     opacity:1; 
    } 
    30% { 
     opacity:0; 
    } 
    100% { 
     opacity:0; 
    } 
} 


@keyframes anim_slides { 
    0% { 
     opacity:0; 
    } 
    6% { 
     opacity:1; 
    } 
    24% { 
     opacity:1; 
    } 
    30% { 
     opacity:0; 
    } 
    100% { 
     opacity:0; 
    } 
} 
.slides ul li { 
    opacity:0; 
    position:absolute; 
    top:0; 

    /* css3 animation */ 
    -webkit-animation-name: anim_slides; 
    -webkit-animation-duration: 24.0s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 0; 
    -webkit-animation-play-state: running; 
    -webkit-animation-fill-mode: forwards; 

    -moz-animation-name: anim_slides; 
    -moz-animation-duration: 24.0s; 
    -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: normal; 
    -moz-animation-delay: 0; 
    -moz-animation-play-state: running; 
    -moz-animation-fill-mode: forwards; 

    animation-name: anim_slides; 
    animation-duration: 24.0s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
    animation-delay: 0; 
    animation-play-state: running; 
    animation-fill-mode: forwards; 
} 


/* css3 delays */ 
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div { 
    -webkit-animation-delay: 6.0s; 
    -moz-animation-delay: 6.0s; 
animation-delay: 6.0s; 
} 
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div { 
    -webkit-animation-delay: 12.0s; 
    -moz-animation-delay: 12.0s; 
animation-delay: 12.0s; 
} 
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div { 
    -webkit-animation-delay: 18.0s; 
    -moz-animation-delay: 18.0s; 
animation-delay: 18.0s; 
} 


.slides ul li:nth-child(5), .slides ul li:nth-child(5) div { 
    -webkit-animation-delay: 24.0s; 
    -moz-animation-delay: 24.0s; 
animation-delay: 24.0s; 
} 

.slides ul li img { 
    display:block; 
} 

/* keyframes #anim_titles */ 
@-webkit-keyframes anim_titles { 
    0% { 
     left:100%; 
     opacity:0; 
    } 
    5% { 
     left:10%; 
     opacity:1; 
    } 
    20% { 
     left:10%; 
     opacity:1; 
    } 
    25% { 
     left:100%; 
     opacity:0; 
    } 
    100% { 
     left:100%; 
     opacity:0; 
    } 
} 
@-moz-keyframes anim_titles { 
    0% { 
     left:100%; 
     opacity:0; 
    } 
    5% { 
     left:10%; 
     opacity:1; 
    } 
    20% { 
     left:10%; 
     opacity:1; 
    } 
    25% { 
     left:100%; 
     opacity:0; 
    } 
    100% { 
     left:100%; 
     opacity:0; 
    } 
} 

@keyframes anim_titles { 
    0% { 
     left:100%; 
     opacity:0; 
    } 
    5% { 
     left:10%; 
     opacity:1; 
    } 
    20% { 
     left:10%; 
     opacity:1; 
    } 
    25% { 
     left:100%; 
     opacity:0; 
    } 
    100% { 
     left:100%; 
     opacity:0; 
    } 
}

и вы можете проверить HTML кодирование для позиционирования, проверяя website- http://metroanimalshelter.org/

Любая помощь здесь будет весьма признателен.

источник

2014-11-12 Mike S

Вы включили только -webkit и -moz свойства префикса CSS, которые будут работать только в браузерах webkit и mozilla соответственно. В каждом месте вы включаете префиксы, вам также необходимо включить свойство unprefixed. Например:

.slides ul li:nth-child(2), .slides ul li:nth-child(2) div { 
    -webkit-animation-delay: 6.0s; 
    -moz-animation-delay: 6.0s; 
    animation-delay: 6.0s; 
}

Стоит также отметить, что это будет работать только в IE10 и 11. Версии IE до этого не поддерживает CSS-анимации. http://caniuse.com/#feat=css-animation

источник

2014-11-12 17:53:48

Благодаря Steve; Если бы вы могли это проверить, я представил обновленную версию; что-то еще должно быть не так. –

еще раз спасибо Стив; извините за размещение его в неправильном месте. Я обновил кодировку выше; он все еще не работает. Я не знаю, что я делаю неправильно. –

@MikeS все еще немного, везде, где есть '@ -keyframes', это должно быть' @ keyframes'. Все остальное выглядит хорошо. –

Я бы порекомендовал вам использовать autoprefixer вместо того, чтобы устанавливать префиксы поставщиков для каждого браузера. меньше писать и легко поддерживать код

https://github.com/postcss/autoprefixer

источник

2014-11-12 18:02:48 Andrey

спасибо; не помог –

Эффект затухания веб-сайта не работает в обозревателе Internet Explorer

ответ

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