다중 전환 CSS

Question

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

http://cssdesk.com/VbVTX

나는 이미지가 먼저 바로 20deg에 의해 다음 다시 시작하려면 다음 에, 20deg 남긴 에 회전 할.

나는 시도했다 :

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

및

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

가 나는 전/후를 사용하는 것이 가장겠습니까? 사전

Answer 1

CSS3 Keyframe animation에서

덕분에 그들은 당신이 몇 가지 상태를 정의하고 이러한 상태 사이에 애니메이션을 적용 할 수 있도록,이 효과를 만들기 위해 더 적합 할 것이다.

다음 데모는 이미지를 20도 왼쪽으로 회전 한 다음 정상 상태로 되돌리고 일시 중지하고 20도 왼쪽으로 회전합니다. 마우스를 올리면 애니메이션이 시작됩니다. 응답 시간을내어 너무 많은

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