animation-iteration-count 动画执行次数

设置动画执行的次数。

语法:

{ animation-iteration-count : sAnimationIterationCount }

默认值: 1
继承性:
DOM 语法: object.style.animationIterationCount = sAnimationIterationCount
适用于: 所有元素
浏览器支持: ChromeSafari

可能的值:

infinite | <number>

描述
infinite 无限次
<number> 指定一个次数。

说明:

例子 1:

<style>
#cavas1
{
  width: 600px;
  background-color: orange;
  border: 20px solid;
  border-color:red;
  padding: 10px;
  line-height: 1.3em;
  opacity:0.1;
  -webkit-animation-name:mxhopacity;
  -webkit-animation-duration:5s;
  -webkit-animation-timing-function:ease;
  -webkit-animation-delay:0.5s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
 
  animation-name:mxhopacity;
  animation-duration:5s;
  animation-timing-function:ease;
  animation-delay:0.5s;
  animation-iteration-count:infinite;
  animation-direction:alternate; 
}

@-webkit-keyframes mxhopacity
{
  from 
  {
    opacity: 0.1;
    width:600px;
  } 
  to
  {
    opacity:1;
    width:800px;
  }                               
}

@keyframes mxhopacity
{
  from 
  {
    opacity: 0.1;
    width:600px;
  } 
  to
  {
    opacity:1;
    width:800px;
  }                               
}
</style>

<div id="cavas1">
  外湖富商高赞的女儿高秋芳,聪明俊美,被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机,登门参试者甚多,但都不中意。宦门公子颜俊,不学无术,恃财仗势,选美寻欢。在庙会上,颜俊见秋芳貌美,欲以金钱取得她的欢心,虽遭碰壁,却不死心。于是,他指使其债户果子铺掌柜尤辰,前往高府骗婚。不料高赞择婿严谨,定要会文相婿。颜俊腹中无墨,又怕高家认出他是追赶高小姐的无耻之徒,便想出移花接木之计,假以会文为名,蒙骗其表弟钱青冒名顶替,到高府应试。相亲宴上,秋芳乔装改扮,亲赴席前送酒试才。高赞见钱青才貌出众,欣然允亲。吉日将临,高赞定要佳婿亲自迎娶。颜俊唯恐真情败露,再次请钱青帮助。钱青正为替他相亲之事悔恨不已,拒不替他迎亲。后来,颜母亲自出面,迫使钱青应允。钱青万般无奈,违心从命。迎亲之日,高府宾客满座,盛情款待,忽然,天气突变,风雪交加,湖水浪涌,无法行船,高赞恐误吉日良辰,执意在他家拜堂成亲。迎亲者自知不妥,但又不能言明,只得拜天地,入洞房。秋芳夙愿得偿,感到无比幸福,对钱青关怀备至。可是,钱青悔恨交加,不知所措。花烛之夜,一对新人,各怀心事,痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲,怒不可遏,硬拉钱青上公堂,告钱青骗婚占妻之罪。高赞得知真情,也拉尤辰到公堂论理。知县在夫人的协助下,审明案情,惩戒了颜俊,成全了钱青与秋芳的姻缘。
</div>
测试结果:Safari 4+,Chrome 10+ 都支持该属性。
本属性最后更新时间:2011-05-04 15:11:51