Друзья, подскажите пожалуйста, в чем может быть дело: поставил слайдер из трех картинок, все работает, но когда эти три слайдера заканчиваются остается один фон (то есть, идет сильная задержка) и потом все заново слайдеры начинают передвигаться. Как избавиться от такой задержки: Вот сам код
Код
<!-- Слайды -->
<div class="slides">
<ul>
<li><img src="http://rumrum.ru/rumrum/web/advokat-imanov/img/slide_1.jpg" alt="image02" />
<div>В зависимости от характера и степени общественной опасности деяния, предусмотренные настоящим Кодексом, подразделяются на преступления небольшой тяжести, преступления средней тяжести, тяжкие преступления и особо тяжкие преступления</div>
</li>
<li><img src="http://rumrum.ru/rumrum/web/advokat-imanov/img/slide_2.jpg" alt="image03" />
<div>Возраст, с которого наступает уголовная ответственность
1. Уголовной ответственности подлежит лицо, достигшее ко времени совершения преступле-ния шестнадцатилетнего возраста
</div>
</li>
<li><img src="http://rumrum.ru/rumrum/web/advokat-imanov/img/slide_4.jpg" alt="image04" />
<div>Преступление признается оконченным, если в совершенном лицом деянии содержатся все признаки состава преступления, предусмотренного настоящим Кодексом.</div>
</li>
</ul>
</div>
<!-- Слайды end-->
а вот css
Код
/* ---( СЛАЙДЕР )--- */
.slides {
height:530px;
margin:-12px 0 0;
overflow:hidden;
position:relative;
width:1004px;
border-bottom: 3px solid #CC5C36;
}
.slides ul {
list-style:none;
position:relative;
margin: 12px 0 0 -40px;
}
/* Кадры анимации #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:#341607;
border-radius:25px 0 0 25px;
box-shadow:0 0 5px #a84c2b inset;
color:#FFFFFF;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:80%;
width:868px;
/* Анимация 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;
}
/* -------------------- */
