Multiple transitions css

Question

I'm trying to make multiple transitions on a hover state.

http://cssdesk.com/VbVTX

I want the image to first rotate to the left by 20deg, then back to the start, and then to the right by 20deg.

I've tried:

-webkit-transform: rotate(20deg, -20deg);

and

-webkit-transform: rotate(20deg);
-webkit-transform: rotate(-20deg);

Would I be best to use a before/after?

Thanks in advance

Answer 1

CSS3 Keyframe animation would be better suited to make this effect, they allow you to define several states and animate between these states.

The following demo rotates the image left 20 degrees, then back to normal state, pause and rotate 20 degrees left. The animation is launched on hover.

DEMO

.whatWeDo img {
    margin:9% 0;
    height: 102px;
    width: 100px;
}
.whatWeDo img:hover {
    -webkit-animation: rotation 4s;
    animation: rotation 4s;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
@-webkit-keyframes rotation {
    0% {     -webkit-transform: rotate(0deg);}
    25% {    -webkit-transform: rotate(-20deg);}
    50% {    -webkit-transform: rotate(0deg);}
    75% {    -webkit-transform: rotate(0deg);}
    100% {   -webkit-transform: rotate(20deg);}
}
@-keyframes rotation {
    0% {     transform: rotate(0deg);}
    25% {    transform: rotate(-20deg);}
    50% {    transform: rotate(0deg);}
    75% {    transform: rotate(0deg);}
    100% {   transform: rotate(20deg);}
}