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?

robertc · Accepted Answer · 2010-06-26 19:43:24Z

21

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.

answered Jun 26, 2010 at 19:43

robertc

76k19 gold badges201 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Todd Over a year ago

Nice complete answer and demo! Great resource for CSS3 animation explorers.

robertc Over a year ago

Thanks @Todd - I try to make my answers worthwhile :)

Valerij Over a year ago

isn't it easier to toggle a class with associated animation?

robertc Over a year ago

@Vprimachenko in this case you'd have to create a class for each of the possible combinations of left and top, then pick the right one depending on the values entered, so no

Valerij Over a year ago

oh i see i misunderstood the requirements, thanks for clarification

Gaff · Accepted Answer · 2013-03-21 13:07:36Z

0

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.

answered Mar 21, 2013 at 13:07

Gaff

5,6873 gold badges40 silver badges49 bronze badges

Collectives™ on Stack Overflow

Activating Webkit CSS3 animation using Javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related