Múltiples transiciones CSS

Question

Estoy tratando de hacer múltiples transiciones en un estado de flotación.

http://csssdesk.com/vbvtx

Quiero que la imagen primero gire a la izquierda por 20DET , luego vuelva al inicio, y luego a la derecha por 20DET .

He intentado:

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

y

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

¿Sería mejor usar un antes / después?

gracias de antemano

Answer 1

css3 animación de fotograma clave sería más adecuado para hacerEste efecto, le permiten definir varios estados y animar entre estos estados.

La siguiente demostración gira la imagen a la izquierda 20 grados, luego volver al estado normal, pausar y girar 20 grados a la izquierda.La animación se lanza en el flujo.

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