Múltiplas transições CSS

Question

Estou tentando fazer várias transições em um estado de foco.

http://cssdesk.com/VbVTX

Quero que a imagem primeiro gire para o saiu por 20 graus, depois de volta ao início e depois ao certo por volta dos 20 graus.

Eu tentei:

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

e

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

Seria melhor usar um antes/depois?

desde já, obrigado

Answer 1

CSS3 Animação de quadro-chave seriam mais adequados para fazer esse efeito, pois permitem definir vários estados e animar entre esses estados.

A demonstração a seguir gira a imagem 20 graus para a esquerda e, em seguida, volta ao estado normal, pausa e gira 20 graus para a esquerda.A animação é iniciada ao passar o mouse.

DEMONSTRAÇÃO

.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);}
}