How do you spin side to side using css3 animation? - css

Question

I have an image of a face. I want to spin/rotate it side to side. 20 degrees to the right and 20 degrees to the left.
So far this is my code:
<img class="image">
CSS
.image {
-webkit-animation:spin 1.8s linear infinite;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(20deg); }
}
I can get it to move one way, but how do I make it go back the other way?
I was thinking it should work like this: spin from 0 deg to 20 deg from 20 deg to -20 degrees. I tried it but it doesn't work.

Answer 1

You would not be able to achieve it using from and to in animations but you can use the percentage option like below:
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(20deg);
}
100% {
-webkit-transform: rotate(-20deg);
}
}
Explanation:
For the first 50% of the animation duration (0-0.9s), it would rotate the image from 0 to 20 degrees.
For the next 50% (50% - 100%), it would rotate the image from 20 degrees to -20 degrees.
For the animation to have a more smoother look, you could also a rotate to 0 degree in between and at the end (as shown in Sample 2 below).
If you want 0 to 20 alone to happen in a 1.8s window and 20 to -20 degrees to take another 1.8s then you can increase the animation duration to 3.6s in the -webkit-animation property value like below (at the end).
Note: I assume you are aware that with the -webkit- prefix, the animation effect would be seen only in webkit powered browsers. For Firefox, you would have to add -moz- for the animations, keyframes and transform properties and for future compliance you would have to add the standard un-prefixed versions also.
.image {
-webkit-animation:spin 3.6s linear infinite;
}
Fiddle Demo
Sample 2 - with a smoother rotation effect
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
25% { /* note that rotation from 0 to 20 deg happens in 25% time = 0.45 seconds. */
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
Demo for Sample 2