循环多个css动画

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;