如何使用原始JavaScript更改CSS3關鍵幀動畫的持續時間

Question

有沒有方法使用JavaScript更改CSS3關鍵幀動畫的持續時間？在CSS中，你可以做到這一點與動畫持續時間屬性：

animation-duration: 1s; 

JavaScript的應該是生的，我不希望包含的jQuery或其他JS圖書館的到我的網站。

Answer 1

你可以在JavaScript中分配css類，並把你的轉換/持續時間/動畫放在這些css類中或者你可以直接在javascript中指定你的css。

document.getElementById('your_id').style.animationDuration="1s"; 

對於跨瀏覽器，我們可以使用o，moz，ms和webkit作爲前綴。

例 - ：

document.getElementById('your_id').style.webkitTransitionDuration="1s"; 

EXAMPLE

function blink() 
     {  
document.getElementById('blink').className = "animated blink_css"; 
     } 

//在CSS

.animated { 
    -webkit-animation-fill-mode:both; 
    -moz-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    -o-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    -ms-animation-duration:1s; 
    -o-animation-duration:1s; 
    animation-duration:1s; 
} 

    @keyframes 'blink' { 
    0% { background: rgba(255,0,0,0.5); } 
    50% { background: rgba(255,0,0,0); } 
    100% { background: rgba(255,0,0,0.5); 
} 
//try moz for mozilla,o for opera and webkit for safari and chrome 
    .blink_css { 
     -webkit-animation-name: blink; 
     -moz-animation-name: blink; 
     -o-animation-name: blink; 
     animation-name: blink; 
    }