Animate rotation on "CSS3"

css, html, jquery

Solution

Assuming you just want to apply an animation to the transformation, you can use CSS3 transitions, specifically `transition-property` (defines which properties will have a transition) and `transition-duration` (to specify the duration of the transition from start to completion). There is also `transition-timing-function`, which allows you to use any of the following modes of transition: `linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)`

#box
{
    width:200px;
    height:200px;
    background-color:red;
    transition-property: all;
    transition-duration: 0.3s;
    /* Explicit above, can also use shorthand */
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    /* Also shorthand with the easing-function */
    -ms-transition: all 0.3s linear;
}

See my revision to your jsfiddle -> http://jsfiddle.net/fud4n/9/

Problem

If I have this box in CSS3 (also if, for what I understand, this is not CSS3, just browsers specific) : HTML ``` <div id="container"> <div id="box">&nbsp;</div> </div> ​ ``` CSS ``` #container { padding:100px; } #box { width:200px; height:200px; background-color:red; } #box.selected { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } ​ ``` jQuery (just for manage the hover on the box) ``` $('#box').hover( function () { $(this).addClass('selected'); }, function () { $(this).removeClass('selected'); } ); ``` how can I set an animation to that css rotation? I mean, not in 1 step, but fluid. So the moviment should be "animate". Hope you understand what I mean :)

Original source