html - css - 动画迭代计数总是无限的。期望 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

俗话说，“问题往往出在键盘和椅子之间”。在这种情况下成立。 :) 关键帧太多是我自己惹的祸。