使用JavaScript動態生成@ -webkit-keyframes CSS？

我可以生產使用JavaScript動態生成@ -webkit-keyframes CSS？

-webkit-animation-name:mymove;

動態與

object.style.animationName="mymove"

但有可能產生類似

@keyframes mymove 
{ 
from {left:0px;} 
to {left:200px;} 
}

與JS

動態？

來源

2013-04-25 nuway

您是否希望能夠在動畫定義之後（在另一個元素上）引用該動畫，或者僅將動畫應用於當前元素並將其命名爲退出？ – 2013-04-26 00:48:35

現在工作，對不起，延遲！ – 2013-04-26 01:32:37

是，我使用jQuery庫，然後再應用，像這樣：

說，在這種情況下，我想左側值是從屬性類值=「推」

<!--HTML--> 
<div class="push">Wall</div> 

//--JS-- 
var KeyFrame = 
{ 
init: function(){ 
    if(!KeyFrame.check) 
    { 
    //get the left position 
    var pushLeft = $('.push').position().left; 
    //set the style and append to head 
    var css = $('<style>@keyframes mymove{from {left:0px;}to {left:'+pushLeft+'px;}}</style>').appendTo('head'); //make sure you don't carriage return the css inline statement, or else it'll be error as ILLEGAL 
    //so u don't keep appending style to head 
    KeyFrame.check = true; 
    } 
    } 
} 
KeyFrame.init();

來源

2013-07-24 16:31:56 AFwcxx

好吧，如果我理解正確，這jsfiddle應該做的伎倆。

它使用一組預定義的過渡屬性，並通過jquery動態更改值。

定義這些動畫的語法如下...

transition-property: prop1, prop2, prop3; 
transition-duration: timing1, timing2, timing3; 
transition-timing-function: ease1, ease2, ease3;

這樣一來，就可以實現幾乎所有你可以用@keyframes（不太一切，但肯定有相當數量），它恰好被嵌入到元素風格中。從這裏你可以繼續通過jQuery來改變任何你想要的東西。如果其量移動，你可以做這樣的事情......

$("#myElem").css("left", "50px");

和CSS3過渡將完成剩餘的工作。如果這件事情就像改變放心類型，你可以做到這一點與...

$("#myElem").css("transition-timing-function", "linear");

我知道這不正是你要找的，但機會是它會做的伎倆。

來源

2013-04-26 01:50:46

謝謝，但我特別感興趣的是生成@keyframes部分 – nuway 2013-04-26 02:46:34

啊好吧，也許這個答案可以幫助呢？ http://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable – 2013-04-26 02:51:42

一個div動態考慮如何訪問樣式表的想法...

document.styleSheets[0].insertRule(animationRule)

它肯定會很複雜做的很好，所以簡單你要保留一個鏈接，改變規則相關聯的Wi每個物體或東西，以避免混亂。或者你可以嘗試運行帶有時間戳的垃圾回收形式或其他東西來確定何時可以刪除舊垃圾回收。

從快看，因爲我發現了其他鏈接... http://davidwalsh.name/add-rules-stylesheets

deleteRule

http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule

insertRule（addRule在先，並且因此更可靠）

http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule

我也剛剛注意到其他可能有用的東西......

http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule

其實，這看起來像一個更好的清潔理解或至少另一種方式。

http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/

來源

2013-10-22 08:35:47 MistereeDevlord

看起來好像你有CSS3關鍵幀的理解。我建議使用jQuery.Keyframes來生成關鍵幀，您還可以將事件和回調附加到動畫中。

來源

2014-06-17 13:00:06

使用JavaScript動態生成@ -webkit-keyframes CSS？

回答

相關問題