Activating Webkit CSS3 animation using Javascript

Question

I am looking to use Webkit CSS3 to move a absolutely positioned DIV from one location to another on the screen when 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?

Answer 1

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.