javascript - 使用 JavaScript 动态生成 @-webkit-keyframes CSS？

Question

我可以生产

-webkit-animation-name:mymove; 

动态地使用

object.style.animationName="mymove"

但是否有可能生成类似的东西

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

动态地使用 JS？

Answer 1

是的，我使用 Jquery 库然后像这样应用:

假设在这种情况下，我希望左值是来自属性类值 = "push"的 div 的动态值

<!--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();