How do I invoke a CSS3 transition using JavaScript?

Question

When I click on a button, I want a div to rotate, just as I would do with a CSS3 transition: rotate(350deg);. How would I do this with either CSS or JS? (If it can be done with CSS I'd perfer that instead)

possible duplicate of Activating Webkit CSS3 animation using Javascript — robertc
– robertc, Commented Jan 7, 2012 at 22:43
you can't animate with css2 as there's no transition; you will have to use jQuery and a plugin for it, google around — mreq
– mreq, Commented Jan 7, 2012 at 22:44

Nate B · Accepted Answer · 2012-01-07 22:48:59Z

2

In the onclick event of the button, put:

document.getElementById("yourDivId").className += " rotate";

In the CSS:

#yourDivId {
  transition: transform 1s;
}

.rotate {
  transform: rotate(360deg);
}

You'd have to add the browser specfic prefixes (-moz-, -webkit-) to the transition and transform, but this should work for you.

answered Jan 7, 2012 at 22:48

Nate B

6,34428 silver badges23 bronze badges

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

1 Comment

Klemen Slavič Over a year ago

Or alternatively, you could add prefixfree to avoid having to declare different vendor-specific attributes.

Collectives™ on Stack Overflow

How do I invoke a CSS3 transition using JavaScript?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related