使用JQuery $（class）.css（）暫停CSS webkit動畫？

Question

我具有被稱爲.row一個CSS元件，其看起來如下：

@-webkit-keyframes slideright { 
    from  { background-position: left; } 
    to  { background-position: right; } 
} 
.row { 
width: 200%; 
height: 100px; 
-webkit-animation: slide 100s linear infinite; 
} 
.row.row-1 { 
background-image: url(row/1.png); 
-webkit-animation-name: slideright; 
} 

我想改變使用JavaScript或JQuery的動畫速度（100秒），以動態值。 所以我試過這個：

$('.row').css({ 
'width':    '200%', 
'height':    '100px', 
    '-webkit-animation': 'slide 50s linear infinite' 
}); 

這會導致動畫停止播放;該行不移動。我可以將實例高度的其他值更改爲200px，並且高度也會改變。問題是，動畫被殺死了。

我該如何解決這個問題？

Answer 1

這是否必須是動態的？意思是，你已經知道新的速度，還是由你的JS計算出來？如果你知道你想要改變的速度，你更好的選擇（我認爲）是設置兩個類，以及它們之間的交換，因爲你需要（而不是試圖直接修改WebKit的動畫屬性）

@-webkit-keyframes slideright { 
    from  { background-position: left; } 
    to  { background-position: right; } 
} 
.row { 
width: 200%; 
height: 100px; 
-webkit-animation: slide 100s linear infinite; 
} 
.row.new { 
-webkit-animation: slide 50s linear infinite; 
width: 200%; /* change other properties if needed */ 
} 

.row.row-1 { 
background-image: url(row/1.png); 
-webkit-animation-name: slideright; 
} 

和你的jQuery：

$('.row').addClass("new");