Programmatically changing webkit-transformation values in animation rules?

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

Up vote 7 down vote favorite 7 share g+ share fb share tw.

I have this stylesheet: @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,1620px,0px); } } not 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-safari browser.

Javascript css safari webkit mobile-safari link|improve this question edited Mar 16 '11 at 10:02 asked Feb 24 '11 at 13:53clamp3,14113289 77% accept rate.

The best way will be you generate the css rule by javascript - WWDC 2010 CSS3 Animation session have a sample code doing this, please check. – vincicat Mar 18 '11 at 15:06.

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, 1); } If you want to modify a keyframe rule in a stylesheet that's already included, do the following: var stylesheet = document. StyleSheets0 // 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. StyleSheets0 with document.

QuerySelector("linkhref='your-css-url. Css'").sheet.

Have you tried declaring the keyframe portion of your css in a Then your jquery can change this as normal: $('#keyframes'). Text('whatever new values you want in here').

I didn't get when you wanted to modify these values (i.e. Use variables) but nevertheless here are 3 to 4 solutions and 1 impossible solution (for now). Server-side calculation: in order to serve a different CSS from time to time, you can tell PHP or any server-side language to parse .

Css files as well as . Php or . Html and then use PHP variables in-between PHP tags.

Beware of file caching: to avoid it, you can load a stylesheet like style. Css?1234567890random-or-time it will produce an apparent different file and thus won't be cached SASS is also a server-side solution that needs Ruby and will provide you an existing syntax, probably cleaner than a hand-made solution as others have already about problems and solutions LESS is a client-side solution that will load your . Less file and a less.

Js file that will parse the former and provide you variables in CSS whatever your server is. It can also work server-side with node. Js CSS being dynamically modified while your page is displayed?

For 2D there are jquery-animate-enhanced from Ben Barnett, 2d-transform or CSS3 rotate are pitched the other way around (they use CSS3 where possible and where there are no such functions, they fallback to existing jQuery .animate() and IE matrix filter) but that's it. You could create a plugin for jQuery that would manage with a few parameters what you want to achieve with 3D Transformation and avoid the hassle of modifying long and complex CSS rules in the DOM CSS only: you could use -moz-calc 12 that works only in Firefox 4.0 with -webkit-transform that works only in ... OK nevermind :-).

1 calc() also works in IE9. Also, transforms work in every modern browser, not just Webkit (with the appropriate prefix of course). – Lea Verou Mar 16 '11 at 4:21 thanks for your detailed answer!

I want to modify these values at any time after the page is loaded, so unfortunately the server-side solutions are not an option. I will have a look at the other solutions you have mentioned. – clamp Mar 16 '11 at 10:01 "You could create a plugin for jQuery that would manage with a few parameters" is extreme overkill.

The CSSOM is actually very simple for this use case. He's just insertRuleing a single CSSStyleRule into a CSSStyleSheet. It's one function call.

– Eli Grey Mar 20 '11 at 1:44.

Well from your example it seems to me that CSS animations may be overkill. Use transitions instead: -webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */ and then apply a new transform to the element via js: $("")0. WebkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)"; It should animate that.

Should be $("")0 .style. WebkitTransform – melfar Feb 23 at 11:04 yeah sorry. You're right... – Tokimon Mar 1 at 12:30.

Try something like this: var height = {whatever height setting you want to detect}; element.style. WebkitTransform = "translate3d(0px," + height*i + ",0px).

Thanks, but that is actually not exactly what I am looking for. I would rather like to change the values in existing rules for animations – clamp Mar 15 '11 at 12:37.

Create transforms for heights within your chosen granularity, say 0-99, 100-199, 200-299, etc. Each with a unique animation name identifier like: @-webkit-keyframes run100 { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,100px,0px); } } @-webkit-keyframes run200 { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,200px,0px); } } then create matching css classes: . Height-100 div { -webkit-animation-name: run100; } . Height-200 div { -webkit-animation-name: run200; } then with javascript decide which chunk you're in and assign the appropriate class to the surrounding element.

$('#frame'). Attr('class', ''). AddClass('height-100'); Might be ok if the granularity doesn't get too fine!

Set the webkit-keyframes from/to parameter with JavaScript.

I used warmanp's solution and it worked, but with a bit of very important tweaking. $('#ticket-marquee-css'). Text( "@-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" + "@-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }" ); In order to get the CSS transition to update, instead of using the previously-defined values, I had to make the animation stop, then restart.

To do this, I placed a class of "active" on the elements, and made the CSS only apply the transition to the elements that had that class #marquee1. Active {-webkit-animation-name: marqueeL;} #marquee2. Active {-webkit-animation-name: marqueeR;} Then I just had to toggle the "active" class off, wait for it to apply in the DOM (hence the setTimeout), then reapply it.

$('. Ticket-marquee'). RemoveClass('active'); setTimeout(function() { $('.

Ticket-marquee'). AddClass('active'); },1); And that works great! Now I can dynamically change the distance the text moves!

Have you tried declaring the keyframe portion of your css in a 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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.