Creating CSS Animations dynamically?

I have an engine I was making that requires scrolling a large scene amount.
I have had this working with gwt for awhile, but recently spotted I can scroll it much smoother by CSS. I guess the browser is more optimised then my code for this, and as a side-effect I can easily play with ease-in ease-out stuff.

However, the method I used to do this was to add a new style tag to the page and put the css defining the animation keyframes within it

createdStyleTag = DOM.createElement("style");

RootPanel.getBodyElement().appendChild(createdStyleTag);

Then to set the animation

for (String vendor : vendors) {

newstyle=newstyle+"@-"+vendor+"-keyframes "+name+" \n {\n"+

"from { transform: translate(0px,0px); } \n"+

    "to{ transform: translate("+enddifx+"px,"+enddify+"px); } \n"+

    "} \n";

}

Where vendors is a list of vendors (-webkit-  -moz, etc)
Then it was simply a matter of applying a class that set the animation and duration. Worked great on chrome making my app *much* smoother. yay.

Then I read this

https://bugzilla.mozilla.org/show_bug.cgi?id=830056

Despite Firefox supporting CSS animations it seems they dont support them inline. So this sort of on-the-fly defining and running doesnt work.

I wondered if anyone had any alternative methods?

Essentially I am just panning a large absolute panel (with a lot on it) within another one, and am hoping to move it between two runtime set locations in the smoothest possible way.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.