爲什麼使用JavaScript無法更改CSS動畫的速度

我製作了CSS動畫和一些JavaScript代碼來更新動畫速度。看起來我的JavaScript代碼是有效的，但是一旦速度在CSS中設置，就不能再更新了。如果我沒有在CSS中設置速度，那麼JavaScript工作得很好。爲什麼使用JavaScript無法更改CSS動畫的速度

#circle1 { 
    width: 200px; 
    height: 200px; 
    background: blue; 
    -webkit-animation: upDown 5s infinite; /* Safari and Chrome */ 
    animation: upDown 5s infinite; 
}

如果最後兩行CSS上述被刪除JavaScript的工作

document.getElementById('circle1').style.webkitAnimationName = 'upDown'; 
document.getElementById('circle1').style.webkitAnimationDuration = '40s';

如下察看JS提琴瞭解更多詳情http://jsfiddle.net/usJv8/1/

來源

2014-06-18 Philip Kirkbride

看起來像Chrome中的一個錯誤，它將'-webkit-animation：40s'設置爲'-webkit-animation-duration：40s'而不是'-webkit-animation-duration：40s'。 –

嗯...即使在開發工具中應用樣式也不會生效，除非我關閉動畫並重新應用它 –

儘管開發工具表明它已應用，但應用整個動畫快捷方式沒有任何效果。 http://jsfiddle.net/usJv8/2/ –

它看起來就像是一個呈現的問題（你需要重新渲染元素以可視化更改）。我想出了一個「解決方案」，我不知道這是否會爲你工作，因爲它是基於刪除，然後重新附加元素添加到DOM：

document.getElementById('circle1').style.webkitAnimationDuration = '40s'; 

var aux = document.getElementById('circle1'); 
document.getElementById("maincenter").removeChild(document.getElementById('circle1')); 
document.getElementById('maincenter').appendChild(aux);

你可以看到它在這裏工作：http://jsfiddle.net/usJv8/9/（請注意，我向中心標記添加了一個ID）

來源

2014-06-18 17:02:01

由於它可能不是@P @@@@@@@@@ @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @在速度較慢的途中。 –

爲什麼使用JavaScript無法更改CSS動畫的速度

回答

相關問題