다중 전환 CSS

Question

저는 호버 상태에서 여러 전환을 수행하려고합니다.

http://cssdesk.com/vbvtx

이미지가 먼저 왼쪽으로 왼쪽으로 회전하고 시작으로 돌아가고 오른쪽으로 오른쪽으로 오른쪽으로

시도한 것 :

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

.

및

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

.

전 / 후에 사용하는 것이 가장 좋습니다.

미리 감사드립니다

Answer 1

css3 키 프레임 애니메이션 는 더 적합합니다.이 효과를 통해 여러 주를 정의하고 이러한 상태를 애니메이션 할 수 있습니다.

다음의 데모는 이미지를 20 도로 남겨두고 정상 상태로 되돌아 가고 20도 왼쪽으로 회복하고 회전합니다.애니메이션이 호버에서 시작됩니다.

데모

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

.