programmatically changing webkit-transformation values in animation rules

Question

I have this stylesheet:

        @-webkit-keyframes run {             0% {                 -webkit-transform: translate3d(0px, 0px, 0px);             }                         100% {                 -webkit-transform: translate3d(0px, 1620px, 0px);             }         } 

Now, I would like to modify the value of 1620px depending on some parameters. Like this:

        @-webkit-keyframes run {             0% {                 -webkit-transform: translate3d(0px, 0px, 0px);             }                         100% {                 -webkit-transform: translate3d(0px, height*i, 0px);             }         } 

I would prefer to be able to use JavaScript and jQuery, though a pure CSS solution would be ok.

This is for an iPhone game that runs in it's mobile Apple Safari browser.

Answer 1

Use the CSSOM

var style = document.documentElement.appendChild(document.createElement("style")), rule = " run {\     0%   {\         -webkit-transform: translate3d(0, 0, 0); }\         transform: translate3d(0, 0, 0); }\     }\     100% {\         -webkit-transform: translate3d(0, " + your_value_here + "px, 0);\         transform: translate3d(0, " + your_value_here + "px, 0);\     }\ }"; if (CSSRule.KEYFRAMES_RULE) { // W3C     style.sheet.insertRule("@keyframes" + rule, 0); } else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit     style.sheet.insertRule("@-webkit-keyframes" + rule, 0); } 

If you want to modify a keyframe rule in a stylesheet that's already included, do the following:

var       stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify     , rules = stylesheet.rules     , i = rules.length     , keyframes     , keyframe ;  while (i--) {     keyframes = rules.item(i);     if (         (                keyframes.type === keyframes.KEYFRAMES_RULE             || keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE         )         && keyframes.name === "run"     ) {         rules = keyframes.cssRules;         i = rules.length;         while (i--) {             keyframe = rules.item(i);             if (                 (                        keyframe.type === keyframe.KEYFRAME_RULE                     || keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE                 )                 && keyframe.keyText === "100%"             ) {                 keyframe.style.webkitTransform =                 keyframe.style.transform =                     "translate3d(0, " + your_value_here + "px, 0)";                 break;             }         }         break;     } } 

If you don't know the order but do know the URL of the CSS file, replace document.styleSheets[0] with document.querySelector("link[href='your-css-url.css']").sheet.

Answer 2

Have you tried declaring the keyframe portion of your css in a <style> element in the head of your html document. You can then give this element an id or whatever and change it's content whenever you like with javaScript. Something like this:

<style id="keyframes">         @-webkit-keyframes run {             0%    { -webkit-transform: translate3d(0px,0px,0px); }                         100%  { -webkit-transform: translate3d(0px, 1620px, 0px); }         } </style> 

Then your jquery can change this as normal:

$('#keyframes').text('whatever new values you want in here');