我有一个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; }
}
答案 0 :(得分:-1)