3
有沒有方法使用JavaScript更改CSS3關鍵幀動畫的持續時間?在CSS中,你可以做到這一點與動畫持續時間屬性:如何使用原始JavaScript更改CSS3關鍵幀動畫的持續時間
animation-duration: 1s;
JavaScript的應該是生的,我不希望包含的jQuery或其他JS圖書館的到我的網站。
有沒有方法使用JavaScript更改CSS3關鍵幀動畫的持續時間?在CSS中,你可以做到這一點與動畫持續時間屬性:如何使用原始JavaScript更改CSS3關鍵幀動畫的持續時間
animation-duration: 1s;
JavaScript的應該是生的,我不希望包含的jQuery或其他JS圖書館的到我的網站。
你可以在JavaScript中分配css類,並把你的轉換/持續時間/動畫放在這些css類中或者你可以直接在javascript中指定你的css。
document.getElementById('your_id').style.animationDuration="1s";
對於跨瀏覽器,我們可以使用o,moz,ms和webkit作爲前綴。
例 - :
document.getElementById('your_id').style.webkitTransitionDuration="1s";
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;
}
謝謝你,這在Chrome中適用於我。要讀取這個值,你必須使用'''window.getComputedStyle''' – no92
什麼是你想怎麼辦? –
@MESSIAH我正在用一個simlpe JS框架創建一個CSS動畫庫,該框架將動畫附加到事件中。 – no92