css3 애니메이션을 사용하여 어떻게 좌우로 회전합니까?

Question

얼굴이 있습니다. 나는 회전 시키거나 좌우로 회전시키고 싶다. 오른쪽으로 20도, 왼쪽으로 20도.

는 지금까지 내 코드입니다 :

<img class="image"> 

CSS

.image { 

-webkit-animation:spin 1.8s linear infinite; 

} 

@-webkit-keyframes spin { 

from { -webkit-transform: rotate(0deg); } 
to { -webkit-transform: rotate(20deg); } 

} 

나는 그것이 한 방향으로 이동하는 얻을 수 있지만, 나는 그것이 다른 방법으로 돌아가서 어떻게해야합니까?

나는 다음과 같이 작동합니다 생각 : 스핀 를를 0 ℃ 에서 20 ℃, 에 20 ℃, 에서 -20도까지. 나는 그것을 시도했지만 작동하지 않습니다.

Answer 1

당신은 애니메이션에서 from 및 to을 사용하여 달성 할 수 없을 것입니다하지만 당신은 다음과 같은 비율 옵션을 사용할 수 있습니다

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 
    50% { 
     -webkit-transform: rotate(20deg); 
    } 
    100% { 
     -webkit-transform: rotate(-20deg); 
    } 
} 

설명 :

• 처음 50 %를 애니메이션 지속 시간 (0-0.9 초) 동안, 0에서 20도까지 이미지를 회전시킵니다.
• 다음 50 % (50 % - 100 %) 동안 이미지를 20도에서 -20도까지 회전시킵니다.
• 애니메이션이보다 매끄럽게 보이도록하기 위해 끝과 끝 사이에 0도까지 회전 할 수도 있습니다 (아래의 샘플 2와 같이).
• 1.8s 창에서 0에서 20 번까지, 1.8에서 18 번까지 20 ~ -20도를 사용하려면 아래의 () 속성 값에서 3.6 초로 늘릴 수 있습니다. .

참고 : 난 당신이 -webkit- 접두사로, 애니메이션 효과는 웹킷 전원 브라우저에서 볼 것이라는 점을 알고 가정합니다. Firefox의 경우 애니메이션, 키 프레임 및 변형 속성에 -moz-을 추가해야하고 나중에 준수하려면 표준 접두어가 붙지 않은 버전도 추가해야합니다.

.image { 
    -webkit-animation:spin 3.6s linear infinite; 
} 

Fiddle Demo

---

샘플 2 - 매끄러운 회전 효과

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 
    25% { /* note that rotation from 0 to 20 deg happens in 25% time = 0.45 seconds. */ 
     -webkit-transform: rotate(20deg); 
    } 
    50% { 
     -webkit-transform: rotate(0deg); 
    } 
    75% { 
     -webkit-transform: rotate(-20deg); 
    } 
    100% { 
     -webkit-transform: rotate(0deg); 
    }  
} 

-webkit - 키 프레임 스핀 @

Demo for Sample 2