Transitions multiples CSS

Question

J'essaie de faire plusieurs transitions sur un état de navigation.

http://cssdesk.com/vbvtx

Je veux que l'image tourne d'abord sur la gauche de 20deg , puis retour au début, puis à la droite à droite par 20deg .

J'ai essayé:

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

et

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

Serais-je préférable d'utiliser un avant / après?

Merci d'avance

Answer 1

CSS3 Animation de laframe KeyFrame serait mieux adaptée à faireCet effet, ils vous permettent de définir plusieurs États et d'animer ces états.

La démo suivante fait tourner l'image à gauche de 20 degrés, puis retour à l'état normal, faites une pause et tournez à 20 degrés à gauche.L'animation est lancée sur Hover.

démo

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