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)。