【发布时间】：2012-09-08 10:28:05
【问题描述】：
我有一个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; }
}
【问题讨论】：
-
你试过非厂商前缀
animation-iteration-count: 1; -
嗨，马特！谢谢回复。是的，我也试过了。动画一直持续到持续时间（25 秒）结束
-
好吧，我似乎已经通过删除各种百分比并使用简单的方法解决了我的问题：from { width:0px;不透明度：0； }/to { 宽度：465px;不透明度：.7； }
-
所有这些数字肯定让我有点头疼