Javascript – generate @-webkit-keyframes CSS dynamically with JavaScript


I can produce


dynamically with"mymove"

but is it possible to generate something like

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

dynamically with JS?

Best Solution

Yes, i use Jquery library and then apply like so:

Say in this situation i want the left value to be dynamic from a div with attribute class value = "push"

<div class="push">Wall</div>

var KeyFrame =
 init: function(){
     //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;