Looping multiple css animation

Question

У меня есть полное сравнение анимации css в конце с пакетом. Я не знаю, как можно зацикливать полную анимацию. Пожалуйста помоги!

HTML: -

<div class='packshot' title='packshot'></div> 
<div class='before' title='before'> 
<div class='after' title='after'> 
<textarea readonly cols='0' rows='0' class='container'></textarea> 
</div> 
</div> 
<div class='brandstage' title='brandstage'></div> 

CSS: -

html { 
    background: #fff; 
    height: 100%; 
    width: 100%; 
} 

.before { 
background-image: url(http://design.cafecommunications.hu/skoda/4x4/before-after/kep01.jpg); 
width: 640px; 
height: 360px; 
border: 0; 
padding: 0; 
margin: 0; 
position: absolute; 
overflow: hidden; 
} 

.after { 
background-image: url(http://design.cafecommunications.hu/skoda/4x4/before-after/kep02.jpg); 
height: 360px; 
resize: horizontal; 
position: absolute; 
top: 0; left: 0; 
min-width: 0; 
max-width: 640px; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

.after:before { 
content: '⟨ ⟩'; 
background: rgba(0,0,0,.2); 
font-size: 18px; 
color: white; 
top: 0; right: 0px; 
height: 100%; 
line-height: 440px; 
position: absolute; 
} 

.brandstage { 
background-image: url(http://design.cafecommunications.hu/skoda/4x4/before-after/new-brandstage.jpg); 
width: 640px; 
height: 80px; 
border: 0; 
padding: 0; 
margin: 0; 
position: absolute; 
z-index: 101; 
} 

.container { 
resize: horizontal; 
opacity: 0; 
position: relative; 
top: 50%; 
left: 0px; 
margin-right: 0px; 
width: 0px; height: 0px; 
max-width: 634px; min-width: 12px; 
outline: 0 solid transparent; 
cursor: move; 
cursor: all-scroll; 
transform: scaley(35); 
transform-origin: center center; 
animation: intro 5s 1 normal ease-in-out 8s; 
} 

@keyframes intro { 
0% {width: 0px} 
30% {width: 640px} 
60% {width: 0px} 
100% {width: 640px} 
} 

.packshot { 
background-image: url(http://design.cafecommunications.hu/skoda/4x4/before-after/kocsik.jpg); 
width: 0%; 
height: 100%; 
background-repeat: no-repeat; 
position: absolute; 
transform-origin: center center; 
animation: packshot 10s 1 normal ease-in-out 11s; 
z-index: 100; 
} 

@keyframes packshot { 
0% {width: 0%} 
10% {width: 100%} 
90% {width: 100%} 
100% {width: 0%} 
} 

Answer 1

Добавить infinite в цикле ключевого кадра вызовы и alternate отменить анимацию.

animation: intro 5s ease-in-out 8s alternate infinite; 

animation: packshot 10s ease-in-out 11s alternate infinite;