css - webkit动画 Prop

Question

有没有办法让 webkit 动画无限期地运行？

Answer 1

当然是:

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
}

img.pulse { opacity: 0.75; }
img.pulse:hover { 
  -webkit-animation-name: pulse; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: 10; 
}

这取自 source, here

要观察的重要部分(显然，我想)是 keyframes @-webkit-keyframes pulse {/*...*/} 中的那些部分，定义动画的名称 'pulse' from(开始)、50% 标记和 to(结束)(您会注意到与 完全相同from 声明，给人以无缝动画的印象。

转念一想，-webkit-animation-iteration-count: 10; 似乎在“无限”方面存在问题。省略此属性意味着动画只发生一次，将值设置为 0(如预期的那样)将完全阻止动画发生。

所以，也许不是无限的，但它似乎对 3000 的值很满意，所以大概其他类似的大数字也是可行的。

修改后的演示 with super-large -webkit-animation-iteration-count of over nine-thousaaaaaand...

---

编辑惊讶:

显然无限 是，实际上是一个valid argument对于 -webkit-animation-iteration-count。在 jsbin (again) 查看最新的 演示.