Smooth CSS Transition Animation Rotation

Question

I have created this fiddle to demonstrate the problem:

http://jsfiddle.net/NfX56/

Animation ROTATION and HOVER seems to work fine for changing direction but

Answer 1

well, this out:

css:

#test {
    margin: 100px;
    height: 200px; width: 200px;
    background: black;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#test:hover {
    background: gray;
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    transform: rotate(1080deg);

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

html:

DEMO

The problem that you are having is due to the slowness of the transition. Since css can have any logic, when you hover the elm will start again from "0" or "360" or whatever your setup was. So will never be smooth because css can't know what was the last "deg num" before the hover happened...

However! you can try stylus

"Stylus features powerful in-language function definitions."

Hope this help :/