Animate rotation on "CSS3"

Question

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 :)

you can rotate it with css itself ... – Miqdad Ali Jun 22 '12 at 10:34 — Miqdad Ali, Jun 22 '12 at 10:34
hey now check to this http://jsfiddle.net/fud4n/12/ – Rohit Azad Malik Jun 22 '12 at 10:43 — Rohit Azad Malik, Jun 22 '12 at 10:43

Rudi Visser · Accepted Answer · 2012-06-22T10:41:39.633

5

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/

edited Jun 22 '12 at 10:41

answered Jun 22 '12 at 10:36

Rudi Visser

21,350
5
71
97

You should really use the short form of the properties. The code in your answer is really redundant. – Hubro Jun 22 '12 at 10:39
@Codemonkey Yes hence the shorthand of the `-ms-` version, I was simply verbosely demonstrating the properties :) I will update the others to be shorthand also. – Rudi Visser Jun 22 '12 at 10:40
Well! My problem is with a rotation fixed point : http://jsfiddle.net/fud4n/13/ it make a strange effect, doesnt rotate "around" that point – markzzz Jun 22 '12 at 10:47
@rudi_visser Better yet, remove the Jquery altogether and use the CSS pseudo-class ":hover" as in [this modified fiddle](http://jsfiddle.net/7fVYV/) – Felix Jun 22 '12 at 10:51
@markzzz I think it's because the origin point will also be animated since it's on the hover state, apply it to #box directly. – Rudi Visser Jun 22 '12 at 13:27

score 2 · Answer 2 · answered Jun 22 '12 at 10:37

2

You can use CSS transitions like so:

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

answered Jun 22 '12 at 10:37

Christian

19,605
3
54
70

with transform-origin it doesnt works as well : http://jsfiddle.net/fud4n/10/ (i make some strange "movement" around the fixed rotation point) :( – markzzz Jun 22 '12 at 10:42

score 1 · Answer 3 · answered Jun 22 '12 at 10:50

1

Here's what you're trying to do:

http://jsfiddle.net/fud4n/18/

It's important to remember to but the origin and transition properties in the class/id of the element you're trying to animate, not the class representing the animated state.

Cheers

answered Jun 22 '12 at 10:50

Hubro

56,214
69
228
381

score 0 · Answer 4 · answered Jun 22 '12 at 10:50

Use a CSS3 animation like so: http://jsfiddle.net/fud4n/15/ (example given for firefox only). This will perform a continuos rotation, just change the duration as you prefer.

#box.selected {    
    -moz-animation-name: rotation;  
    -moz-animation-duration: 2s;  
}

@-moz-keyframes rotation {
    from {  -moz-transform: rotate(0deg);  }      
    to   {  -moz-transform: rotate(30deg);  }
}

Animate rotation on "CSS3"

HTML

CSS

jQuery (just for manage the hover on the box)

4 Answers4