GWT and @keyframes

[Lukas Rammy]

First of all Hello everyone!

This is my first topic here.
I have searched forum for this kind of problem without clue.

So my problem is:

How to set up from GWT java properties in CSS named keyframes

for eg. I want to put this code from Java to CSS:

@-moz-keyframes slideRight { from {left: 1px;} to {left:51px; width: 72px} }
@-webkit-keyframes slideRight {from {left: 1px;} to {left:51px; width: 72px} }

Why?
I want create animation based on 2 labels and one simple panel moving under them. While animating the size of SimplePanel need to be changed to size of one label.

I know how to set up

-moz-animation:slideRight 2s;
-webkit-animation: {from {left: 1px;} to {left:51px; width: 72px;}} 2s;

its

simplePanel.getElement().getStyle().setProperty("WebkitAnimation", "slideLeft 2s");
simplePanel.getElement().getStyle().setProperty("MozAnimation", "slideLeft 2s");

Hot to set up @keyframes .... ?

I am trying now with javascript inside GWT java:

public static native void setKeyframes() /*-{
		
		self.focus();
		var cssAnimation = document.createElement('style');
		cssAnimation.type = 'text/css';
		var rules = document.createTextNode('@-webkit-keyframes slider {'+
		'from { left:100px; }'+
		'to { left:150px; }'+
		'}');
		
		cssAnimation.appendChild(rules);
		document.getElementsByTagName("head")[0].appendChild(cssAnimation);
	}-*/;

Any suggestions will be very welcome ;)

[Lukas Rammy]

At the end I decide to make animation by CSS property: transition

Thanks All ;)