css - animation-iteration-count总是无限的。欲望1次迭代

时间:2012-09-15 14:53:09

标签: html css html5 css3

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

}

1 个答案:

答案 0 :(得分:-1)

正如俗话所说,“问题通常在键盘和椅子之间”。在这种情况下是正确的。 :)我用太多的关键帧造成了我自己的困境。