1

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

}
4

1 回答 1

-1

俗话说,“问题往往出在键盘和椅子之间”。在这种情况下成立。:) 我用太多的关键帧给自己造成了麻烦。

于 2012-09-15T23:59:48.900 回答