Как зацикливать эту анимацию слайдера css?

Question

Я пытаюсь создать слайдер css. До сих пор мне удалось добиться правильной итерации только один раз. Есть ли способ сделать это бесконечно без изменения конечного результата?

<div class="slider"> 
<div class="slides"> 
<div class="slider-1"></div> 
<div class="slider-2"></div> 
<div class="slider-3"></div> 
<div class="slider-4"></div> 
</div> 
</div> 

Css

.slider{ 
    width:700px; 
    height:300px; 
    margin:50px auto; 
    border:1px solid; 
    overflow:hidden; 
} 
.slides{ 
    width:400%; 
    height:100%; 
    -webkit-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards; 
    -moz-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards; 
    animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards; 
} 
.slider-1, .slider-2, .slider-3, .slider-4{ 
    width:25%; 
    height:100%; 
    float:left; 
} 
.slider-1{ 
    background:#222; 
} 
.slider-2{ 
    background:#444; 
} 
.slider-3{ 
    background:#666; 
} 
.slider-4{ 
    background:#888; 
} 

@-webkit-keyframes slide-1{ 
    from{margin-left:0px;} 
    to{margin-left:-100%;} 
} 
@-webkit-keyframes slide-2{ 
    from{margin-left:-100%;} 
    to{margin-left:-200%;} 
} 
@-webkit-keyframes slide-3{ 
    from{margin-left:-200%;} 
    to{margin-left:-300%;} 
} 
@-webkit-keyframes slide-4{ 
    from{margin-left:-300%;} 
    to{margin-left:0%;} 
} 
@-moz-keyframes slide-1{ 
    from{margin-left:0px;} 
    to{margin-left:-100%;} 
} 
@-moz-keyframes slide-2{ 
    from{margin-left:-100%;} 
    to{margin-left:-200%;} 
} 
@-moz-keyframes slide-3{ 
    from{margin-left:-200%;} 
    to{margin-left:-300%;} 
} 
@-moz-keyframes slide-4{ 
    from{margin-left:-300%;} 
    to{margin-left:0%;} 
} 
@keyframes slide-1{ 
    from{margin-left:0px;} 
    to{margin-left:-100%;} 
} 
@keyframes slide-2{ 
    from{margin-left:-100%;} 
    to{margin-left:-200%;} 
} 
@keyframes slide-3{ 
    from{margin-left:-200%;} 
    to{margin-left:-300%;} 
} 
@keyframes slide-4{ 
    from{margin-left:-300%;} 
    to{margin-left:0%;} 
} 

http://jsfiddle.net/1kcbpqfu/

Answer 1

Насколько я знаю, вы не можете гнездо более одной анимации и добавить свойство анимации-итерация подсчета. Он будет повторять каждую анимацию индивидуально.

Однако, если вы делаете только одну анимацию, вы можете установить его повторять бесконечно, как это:

HTML:

<div class="slider"> 
    <div class="slides"> 
     <div class="slider-1"></div> 
     <div class="slider-2"></div> 
     <div class="slider-3"></div> 
     <div class="slider-4"></div> 
    </div> 
</div> 

CSS:

.slider{ 
    width:700px; 
    height:300px; 
    margin:50px auto; 
    border:1px solid; 
    overflow:hidden; 
} 
.slides{ 
    width:400%; 
    height:100%; 
    -webkit-animation:slide 16s infinite; 
    -moz-animation:slide 16s infinite; 
    animation:slide 16s infinite; 
} 
.slider-1, .slider-2, .slider-3, .slider-4{ 
    width:25%; 
    height:100%; 
    float:left; 
} 
.slider-1{ 
    background:#222; 
} 
.slider-2{ 
    background:#444; 
} 
.slider-3{ 
    background:#666; 
} 
.slider-4{ 
    background:#888; 
} 

@-webkit-keyframes slide{ 
    0%,100% { 
     margin-left:0%; 
    } 

    12% { 
     margin-left:0%; 
    } 

    24% { 
     margin-left:-100%; 
    } 

    36% { 
     margin-left:-100%; 
    } 

    48% { 
     margin-left:-200%; 
    } 

    60% { 
     margin-left:-200%; 
    } 

    72% { 
     margin-left:-300%; 
    } 

    84% { 
     margin-left:-300%; 
    } 
} 
@-moz-keyframes slide{ 
    0%,100% { 
     margin-left:0%; 
    } 

    12% { 
     margin-left:0%; 
    } 

    24% { 
     margin-left:-100%; 
    } 

    36% { 
     margin-left:-100%; 
    } 

    48% { 
     margin-left:-200%; 
    } 

    60% { 
     margin-left:-200%; 
    } 

    72% { 
     margin-left:-300%; 
    } 

    84% { 
     margin-left:-300%; 
    } 
} 
@keyframes slide{ 
    0%,100% { 
     margin-left:0%; 
    } 

    12% { 
     margin-left:0%; 
    } 

    24% { 
     margin-left:-100%; 
    } 

    36% { 
     margin-left:-100%; 
    } 

    48% { 
     margin-left:-200%; 
    } 

    60% { 
     margin-left:-200%; 
    } 

    72% { 
     margin-left:-300%; 
    } 

    84% { 
     margin-left:-300%; 
    } 
} 

Вот код бетонные: http://jsfiddle.net/1kcbpqfu/2/

EDIT: Проценты рассчитываются по

Time_of_property_change/Time_of_whole_animation 

Это означает, если хотите 10 секунд анимации, с переходом между кадрами в 3s с 2s длительностью, а в 8s обратно в положение кулачка, то CSS кадр анимации должен выглядеть так:

0%, 100% { /* Beggining and end of animation */ 
    margin-left: 0%; 
} 

30% { /* Beggining of transition 
    margin-left: 0%; /* Until 3 seconds, keep same frame */ 
} 

50% { /* End of transition */ 
    margin-left: -100%; /* in 5 seconds, finish animation 

80% { /* In 8 seconds, start transition to first frame */ 
    margin-left: -100%; 
} 

Answer 2

На мой взгляд, это один из лучших решений.

/* RESET */ 
 

 
html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, 
 
footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
body { 
 
\t line-height: 1; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
table { 
 
\t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
} 
 

 
/* ANIMATION */ 
 
@-moz-keyframes cycle { 
 
\t 0% { top:0px; } 
 
\t 4% { top:0px; } 
 
\t 16% { top:0px; opacity:1; z-index:0; } 
 
\t 20% { top:325px; opacity:0; z-index:0; } 
 
\t 21% { top:-325px; opacity:0; z-index:-1; } 
 
\t 92% { top:-325px; opacity:0; z-index:0; } 
 
\t 96% { top:-325px; opacity:0; } 
 
\t 100%{ top:0px; opacity:1; } 
 
\t 
 
} 
 
@-moz-keyframes cycletwo { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 16% { top:-325px; opacity:0; } 
 
\t 20% { top:0px; opacity:1; } 
 
\t 24% { top:0px; opacity:1; } 
 
\t 36% { top:0px; opacity:1; z-index:0; } 
 
\t 40% { top:325px; opacity:0; z-index:0; } 
 
\t 41% { top:-325px; opacity:0; z-index:-1; } 
 
\t 100%{ top:-325px; opacity:0; z-index:-1; } 
 
} 
 
@-moz-keyframes cyclethree { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 36% { top:-325px; opacity:0; } 
 
\t 40% { top:0px; opacity:1; } 
 
\t 44% { top:0px; opacity:1; } 
 
\t 56% { top:0px; opacity:1; } 
 
\t 60% { top:325px; opacity:0; z-index:0; } 
 
\t 61% { top:-325px; opacity:0; z-index:-1; } 
 
\t 100%{ top:-325px; opacity:0; z-index:-1; } 
 
} 
 
@-moz-keyframes cyclefour { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 56% { top:-325px; opacity:0; } 
 
\t 60% { top:0px; opacity:1; } 
 
\t 64% { top:0px; opacity:1; } 
 
\t 76% { top:0px; opacity:1; z-index:0; } 
 
\t 80% { top:325px; opacity:0; z-index:0; } 
 
\t 81% { top:-325px; opacity:0; z-index:-1; } 
 
\t 100%{ top:-325px; opacity:0; z-index:-1; } 
 
} 
 
@-moz-keyframes cyclefive { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 76% { top:-325px; opacity:0; } 
 
\t 80% { top:0px; opacity:1; } 
 
\t 84% { top:0px; opacity:1; } 
 
\t 96% { top:0px; opacity:1; z-index:0; } 
 
\t 100%{ top:325px; opacity:0; z-index:0; } 
 
} 
 

 
@-webkit-keyframes cycle { 
 
\t 0% { top:0px; } 
 
\t 4% { top:0px; } 
 
\t 16% { top:0px; opacity:1; z-index:0; } 
 
\t 20% { top:325px; opacity:0; z-index:0; } 
 
\t 21% { top:-325px; opacity:0; z-index:-1; } 
 
\t 50% { top:-325px; opacity:0; z-index:-1; } 
 
\t 92% { top:-325px; opacity:0; z-index:0; } 
 
\t 96% { top:-325px; opacity:0; } 
 
\t 100%{ top:0px; opacity:1; } 
 
\t 
 
} 
 
@-webkit-keyframes cycletwo { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 16% { top:-325px; opacity:0; } 
 
\t 20% { top:0px; opacity:1; } 
 
\t 24% { top:0px; opacity:1; } 
 
\t 36% { top:0px; opacity:1; z-index:0; } 
 
\t 40% { top:325px; opacity:0; z-index:0; } 
 
\t 41% { top:-325px; opacity:0; z-index:-1; } 
 
\t 100%{ top:-325px; opacity:0; z-index:-1; } 
 
} 
 
@-webkit-keyframes cyclethree { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 36% { top:-325px; opacity:0; } 
 
\t 40% { top:0px; opacity:1; } 
 
\t 44% { top:0px; opacity:1; } 
 
\t 56% { top:0px; opacity:1; z-index:0; } 
 
\t 60% { top:325px; opacity:0; z-index:0; } 
 
\t 61% { top:-325px; opacity:0; z-index:-1; } 
 
\t 100%{ top:-325px; opacity:0; z-index:-1; } 
 
} 
 
@-webkit-keyframes cyclefour { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 56% { top:-325px; opacity:0; } 
 
\t 60% { top:0px; opacity:1; } 
 
\t 64% { top:0px; opacity:1; } 
 
\t 76% { top:0px; opacity:1; z-index:0; } 
 
\t 80% { top:325px; opacity:0; z-index:0; } 
 
\t 81% { top:-325px; opacity:0; z-index:-1; } 
 
\t 100%{ top:-325px; opacity:0; z-index:-1; } 
 
} 
 
@-webkit-keyframes cyclefive { 
 
\t 0% { top:-325px; opacity:0; } 
 
\t 76% { top:-325px; opacity:0; } 
 
\t 80% { top:0px; opacity:1; } 
 
\t 84% { top:0px; opacity:1; } 
 
\t 96% { top:0px; opacity:1; z-index:0; } 
 
\t 100%{ top:325px; opacity:0; z-index:0; } 
 
} 
 

 
/* ANIMATION BAR */ 
 
@-moz-keyframes fullexpand { 
 
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 
 
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 
 
    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 
 
    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 
 
    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } \t 
 
} 
 
@-webkit-keyframes fullexpand { 
 
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 
 
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 
 
    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 
 
    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 
 
    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } \t 
 
} 
 

 
/* Common */ 
 
html, body { 
 
\t background:#eaeaea url(../img/bg.png) repeat; 
 
\t font-size:12px; 
 
\t font-family:"Open Sans", serif; 
 
\t min-width:960px; 
 
\t margin:0; 
 
\t padding:0; 
 
\t color:#aaa; 
 
} 
 

 
.content h1 { 
 
\t font-size:48px; 
 
\t color:#000; 
 
\t text-shadow:0px 1px 1px #f4f4f4; 
 
\t text-align:center; 
 
\t padding:60px 0 30px; \t 
 
} 
 

 
/* LAYOUT */ 
 
.container { 
 
\t margin:0 auto; 
 
\t overflow:hidden; 
 
\t width:960px; 
 
} 
 

 
/* CONTENT SLIDER */ 
 
#content-slider { 
 
\t width:100%; 
 
\t height:360px; 
 
\t margin:10px auto 0; 
 
} 
 
/* SLIDER */ 
 
#slider { 
 
\t background:#000; 
 
\t border:5px solid #eaeaea; 
 
\t box-shadow:1px 1px 5px rgba(0,0,0,0.7); 
 
\t height:320px; 
 
\t width:680px; 
 
\t margin:40px auto 0; 
 
\t overflow:visible; 
 
\t position:relative; 
 
} 
 
#mask { 
 
\t overflow:hidden; 
 
\t height:320px; 
 
} 
 
#slider ul { 
 
\t margin:0; 
 
\t padding:0; 
 
\t position:relative; 
 
} 
 
#slider li { 
 
\t width:680px; 
 
\t height:320px; 
 
\t position:absolute; 
 
\t top:-325px; 
 
\t list-style:none; 
 
} 
 

 
#slider li.firstanimation { 
 
\t -moz-animation:cycle 25s linear infinite; \t 
 
\t -webkit-animation:cycle 25s linear infinite; \t \t 
 
} 
 
#slider li.secondanimation { 
 
\t -moz-animation:cycletwo 25s linear infinite; 
 
\t -webkit-animation:cycletwo 25s linear infinite; \t \t 
 
} 
 
#slider li.thirdanimation { 
 
\t -moz-animation:cyclethree 25s linear infinite; 
 
\t -webkit-animation:cyclethree 25s linear infinite; \t \t 
 
} 
 
#slider li.fourthanimation { 
 
\t -moz-animation:cyclefour 25s linear infinite; 
 
\t -webkit-animation:cyclefour 25s linear infinite; \t \t 
 
} 
 
#slider li.fifthanimation { 
 
\t -moz-animation:cyclefive 25s linear infinite; 
 
\t -webkit-animation:cyclefive 25s linear infinite; \t \t 
 
} 
 

 
#slider .tooltip { 
 
\t background:rgba(0,0,0,0.7); 
 
\t width:300px; 
 
\t height:60px; 
 
\t position:relative; 
 
\t bottom:75px; 
 
\t left:-320px; 
 
\t -moz-transition:all 0.3s ease-in-out; 
 
\t -webkit-transition:all 0.3s ease-in-out; 
 
} 
 
#slider .tooltip h1 { 
 
\t color:#fff; 
 
\t font-size:24px; 
 
\t font-weight:300; 
 
\t line-height:60px; 
 
\t padding:0 0 0 20px; 
 
} 
 
#slider li#first:hover .tooltip, 
 
#slider li#second:hover .tooltip, 
 
#slider li#third:hover .tooltip, 
 
#slider li#fourth:hover .tooltip, 
 
#slider li#fifth:hover .tooltip { 
 
\t left:0px; 
 
} 
 
#slider:hover li, 
 
#slider:hover .progress-bar { 
 
\t -moz-animation-play-state:paused; 
 
\t -webkit-animation-play-state:paused; 
 
} 
 

 
/* PROGRESS BAR */ 
 
.progress-bar { 
 
\t position:relative; 
 
\t top:-5px; 
 
\t width:680px; 
 
\t height:5px; 
 
\t background:#000; 
 
\t -moz-animation:fullexpand 25s ease-out infinite; 
 
\t -webkit-animation:fullexpand 25s ease-out infinite; 
 
}

<div class="content"> 
 
\t <h1>Pure CSS3 Cycle Slider</h1> 
 
</div> 
 

 
<div class="container"> 
 
\t <div id="content-slider"> 
 
    \t <div id="slider"> 
 
     \t <div id="mask"> 
 
      <ul> 
 
      \t <li id="first" class="firstanimation"> 
 
      <a href="#"> 
 
      <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_1.jpg" alt="Cougar"/> 
 
      </a> 
 
      <div class="tooltip"> 
 
      <h1>Cougar</h1> 
 
      </div> 
 
      </li> 
 

 
      <li id="second" class="secondanimation"> 
 
      <a href="#"> 
 
      <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_2.jpg" alt="Lions"/> 
 
      </a> 
 
      <div class="tooltip"> 
 
      <h1>Lions</h1> 
 
      </div> 
 
      </li> 
 
      
 
      <li id="third" class="thirdanimation"> 
 
      <a href="#"> 
 
      <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_3.jpg" alt="Snowalker"/> 
 
      </a> 
 
      <div class="tooltip"> 
 
      <h1>Snowalker</h1> 
 
      </div> 
 
      </li> 
 
         
 
      <li id="fourth" class="fourthanimation"> 
 
      <a href="#"> 
 
      <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_4.jpg" alt="Howling"/> 
 
      </a> 
 
      <div class="tooltip"> 
 
      <h1>Howling</h1> 
 
      </div> 
 
      </li> 
 
         
 
      <li id="fifth" class="fifthanimation"> 
 
      <a href="#"> 
 
      <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_5.jpg" alt="Sunbathing"/> 
 
      </a> 
 
      <div class="tooltip"> 
 
      <h1>Sunbathing</h1> 
 
      </div> 
 
      </li> 
 
      </ul> 
 
      </div> 
 
      <div class="progress-bar"></div> 
 
     </div> 
 
    </div> 
 
</div>