Activating Webkit CSS3 animation using Javascript

I am looking to use Webkit CSS3 to move a absolutely positioned DIV from one location to another on the screen w开发者_JAVA百科hen a button is pressed, by changing its left and right CSS properties. However, all the examples for doing this that I saw use a static CSS rule to apply this transition.

I don't know the new position before hand, so how do I apply this CSS3 transition dynamically?

Once you've defined the transition it will apply no matter how you change the CSS values on the element. So you can just apply an inline style with JavaScript and the element will animate. So with CSS like this:

left: 100px;
top: 100px;
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;

Have a function like this:

function clickme() {
    var el = document.getElementById('mydiv');
    var left =  300;
    var top =  200;
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;");
}

And you will see the animation when you call the function. You can get the values for left and top from where ever you like. I've done a full example.

Another option would be to use jQuery Transit to move the absolutely positioned div left or right:

Javascript:

$("#btnMoveRight").click( function () {
    $('#element').transition({ left: '+=50px' });
});

$("#btnMoveLeft").click( function () {
    $('#element').transition({ left: '-=50px' });
});

JS Fiddle Demo

It works well on mobile devices and handles your CSS3/browser compatibilities for you.