webkit动画道具

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 {/*...*/}内，定义动画的名字“脉冲'的from（开始），50％的标记，和to（结束）（你会注意到是完全一样的from声明，给人以无缝动画的印象。

退一步来说，似乎-webkit-animation-iteration-count: 10;可能会出现问题，至于“无限”。如果省略该属性意味着动画出现一次，其值设置为0（预期）防止发生在所有的动画。

所以，也许不是无限的，但它看起来很高兴的值为3000，所以大概其他类似的大数字将是可行的。

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

---

编辑惊讶：

显然infinite为，其实，对于一个-webkit-animation-iteration-countvalid argument。请参阅最新的演示，网址为jsbin (again)。