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

I needed to think a lot to solve your request; but I have finally find the solution

demo

The relevant CSS code :

.spin {
    animation: spin 2s linear 0s infinite reverse;
    -moz-animation: 2s linear 0s reverse none infinite spin;
    -webkit-animation: spin 2s linear 0s infinite reverse;
    -0-animation: spin 2s linear 0s infinite reverse;
    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
}
.yin-yang {
    animation: spin 4s linear 0s infinite normal;
    -moz-animation: 4s linear 0s normal none infinite spin;
    -webkit-animation: spin 4s linear 0s infinite normal;
    -0-animation: spin 4s linear 0s infinite normal;
}

The trick: since you already had 2 elements (spin and yin-yang) I set one of them to rotate in one direction, and the other one to rotate in reverse, and more fast. When both are running, the net effect is to rotate in one direction; when only one is rotating, the net effect is the opposite.

Now, the only thing that is left is to pause and restart the fast rotation (not setting reseting it !)

Detected one mistake on the above, the fourth line of .spin:hover should be the un-prefixed:

.spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

corrected demo

Adding an extra element in the HTML I have been able to make the rotation change smooth.

smooth transition demo

The extra CSS is:

.acc {
    transition: all 4s ease-out;
}
.spin:hover .acc {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}