动画迭代次数总是无限的.愿望1次迭代

Question

我有一个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; } 
}

Answer 1

俗话说，"问题通常出在键盘和椅子之间"。在这种情况下成立。：）我用太多的关键帧造成了自己的痛苦。