div幅を広げ、不透明度を上げることでアニメーション化された画像をオーバーレイするタグがあります。私は単に単一の反復が必要です（これはデフォルトです、私は知っています）が、何らかの理由で、それは無限に実行されます。単一の反復を実行する方法についてフィードバックをいただけますか？前もって感謝します！
マークアップ：
<div class="capback">
</div>
css：
.capback {
background: #000;
opacity:0.7;
filter:alpha(opacity=40);
position: absolute;
height: 17px;
width: 465px;
top: 1px;
left: 1px;
color: #fff;
padding: 5 0 0 10px;
font-size: 12px;
-moz-animation: fullexpand 25s ease-out;
-moz-animation-iteration-count:1;
-webkit-animation: fullexpand 25s ease-out;
-webkit-animation-iteration-count:1;
-o-animation: fullexpand 25s ease-out;
-o-animation-iteration-count:1;
}
@-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:465px; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:465px; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:465px; opacity:0; }
}
@-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:465px; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:465px; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:465px; opacity:0; }
}
@-o-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:465px; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:465px; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:465px; opacity:0; }
}