WebKit에서 CSS를 사용하여 스윙 애니메이션을 구현하려면 어떻게해야합니까?

Question

안녕하세요
내 이미지가 ~ 50도 회전하고, 잠시 멈추고 (> 초) 내 이미지를 ~50도 회전 한 다음 원점으로 돌아갈 수있는 방법을 찾고 있습니다. 그리고 반복하십시오.

돌아가려면 말하기에 문제가 있습니다. 어떤 도움이라도 아주 좋을 것입니다. 웹킷에서

Ahuge

Answer 1

애니메이션은 매우 간단 할 수있다. 먼저 @-webkit-keyframes rule 사용하여 애니메이션 효과를 선언 :

@-webkit-keyframes swing { 
from { 
    left: 0px; 
} 
to { 
    left: 200px; 
} 
} 

웹킷은 키 프레임이라는 애니메이션 기술을 사용합니다. 플래시 나 3D 애니메이션에 익숙하다면 그 모습을 알게 될 것입니다. 기본적으로 일련의 "키 프레임"에서 요소에 대한 특정 위치를 설정하고 다른 규칙 세트로 선언 한 설정에 따라 설정 한 키 프레임 사이에서 요소를 부드럽게 "애니메이트"합니다.

애니메이션을 정의한 후에는 -webkit-animation-name 및 관련 속성을 사용하여 애니메이션을 적용합니다.

는

div { 
-webkit-animation-name: swing; 
-webkit-animation-duration: 6s; 
-webkit-animation-iteration-count: 10; 
-webkit-animation-direction: alternate; 
} 

이것은 bounce 애니메이션을 첨부 6 초 열 번을 "재생"하도록 지시하고 반대로 다른 모든 애니메이션을 재생합니다.

키 프레임은 백분율 값을 사용하여 지정되며 "시작"은 0%과 같으며 "끝"은 100%과 동일합니다.

이것은 내가 알고있는 한 Webkit nightly builds에서만 작동하며, 대다수의 사용자는이를 보지 않을 것입니다.

Here is an example for you 야간 빌드를 사용하는 경우가 아니면 애니메이션이 적용되지 않습니다.

더 많은 사용자베이스에서이 애니메이션을 보려면 jQuery 솔루션을 사용하는 것이 좋습니다.