Transizioni multiple CSS.

Question

Sto cercando di effettuare più transizioni su uno stato del volo.

http://cssdesk.com/vbvtx

Voglio che l'immagine si ruota per la prima volta al a sinistra di 20DEG , quindi tornare all'inizio, quindi su Destra di 20DEG .

Ho provato:

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

.

e

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

.

Sarei meglio usare prima / dopo?

Grazie in anticipo

Answer 1

css3 Keyframe Animation sarebbe più adatto per fareQuesto effetto, ti permettono di definire diversi stati e animati tra questi stati.

La seguente demo ruota l'immagine lasciata a 20 gradi, quindi torna allo stato normale, pausa e ruota di 20 gradi a sinistra.L'animazione viene lanciata su 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);}
}

.