помощь в доработке CSS в слайдере

Привет!
Нужна помощь, совет в доработке CSS слайдера.
В Mozilla Firefox и SRWare Iron работает без проблем

В Internet Explorer 10 и Opera 1210 просто отсутствует

Заранее спасибо в помощи.
Код прилагаю

HTML:

/* Слайдер */
.slides{
height:300px;
margin:50pxauto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul{
list-style:none;
position:relative;
}

/* Кадрыанимации #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;
}
}

.slides ul li{
opacity:0;
position:absolute;
top:0;

/* анимация css3 */
-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;
}

/* Задержки css3 */
.slides ul li:nth-child(2),.slides ul li:nth-child(2)div{
-webkit-animation-delay:6.0s;
-moz-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;
}
.slides ul li:nth-child(4),.slides ul li:nth-child(4)div{
-webkit-animation-delay:18.0s;
-moz-animation-delay:18.0s;
}
.slides ul li img{
display:block;
}

/* Кадрыанимации #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;
}
}

.slides ul li div{
background-color:#000000;
border-radius:10px10px10px10px;
box-shadow:005px#FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0auto;
padding:20px;
position:absolute;
top:50%;
width:200px;

/* Анимация css3 */
-webkit-animation-name:anim_titles;
-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_titles;
-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;
}

 

Для работы и выявления ошибки желательно увидеть весь слайдер, а не только стиль css. Это заметно облегчит решение проблемы, знание расположение слоев. А в пустую ковыряться в стилях - трата времени.

 

Спасибо за ответ
молния с субботы вырубила инет
только реанимировали
не совсем понял насчет увидеть весь слайдер
вот где он находится
http://love-okna.ru
http://vamipol.ru
http://gealst.ru
вот ещё проблема с добавлением новых кадров-слайдов
первый исчезает при добавлении пятого

 

@-webkit-keyframes anim_slides{
0%{
opacity:0;
}
}
Такой стиль написания похож на less
+ -webkit-animation -moz-animation
Только для webkit и FF
Если посмотреть здесь, то опера 12.10 не поддерживает animation http://caniuse.com/#search=animation А IE вообще с ним работает через раз
Возьмите нормальный паралакс и не парьте себе мозг

 

спасибо за совет
посоветуйте какой слайдер
кроме того хотелось исключить всевозможные джава скрипты
с целью исключения конфликтов библиотек
цель - работа "поиска" работа "увеличение картинки в статьях" и работа "галереи картинок в статьях" вот как здесь http://love-okna.ru/home/okna-rehau/okna-rehau-intelio

 

Используйте JS и не парьте мозг
Слайдер паралакс работает везде, даже в IE8, конфликтов не создает. CSS еще не на таком уровне, чтобы динамику писать и прогить

 

Советую http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/parallax_slider/index.html вот этот=))
если не нравятся снизу малые картинки их можно убрать.
я с ним уже года 3 работаю.переверстывается под нужды проекта на раз два!

 

Я тебе посоветую этот сервис -- http://wowslider.com/ru/ там есть программа, и полное описание установки, без конфликтов.

 

Странно конечно что в этом разделе спрашиваешь, ну да ладно. Если слайдер у тебя находится в коде и не управляется с админки Джумлы, то самый оптимальный вариант использовать Бутстрап слайдер(хотя из него можно сделать неплохой модуль для Joomla)

А если готовый модуль под джумлу, то тут компонент Widjetkit. У него и слайдеры и галереи и куча эффектов.