버튼 제어 애니메이션

좋아, 그래서 나는 레코드 플레이어의 만화 버전을 만들고있는 프로젝트를 가지고있다. 웹킷을 사용하여 회전하는 레코드의 애니메이션을 토글하는 동시에 오디오 트랙을 시작하는 측면의 재생 버튼을 원합니다. 오디오 트랙은 괜찮지 만 버튼에서 웹킷에 영향을 줄 수 있습니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 차라리 JQuery를 피할 것입니다.버튼 제어 애니메이션

올바른 방향으로 끄덕이는 것이 좋습니다.

출처

2013-05-03 thestinkingbishop

안녕하세요,이 튜토리얼은 당신을 도울 수 http://tympanus.net/codrops/2012/07/12/old-school-cassette- : 다음과 같은 클래스와 선택에 애니메이션 속성을 추가 player-with-html5-audio/ –

WebKit을 사용하거나 영향을 미친다는 것이 확실하지 않습니다. 현재 Safari에서 사용되는 렌더링 엔진이며 Blink라는 포크를 선호하여 Chrome에 의해 삭제되었습니다. 레코드를 애니메이트하기 위해 CSS를 사용하고 싶습니까? –

@dstorey 예 짧게 – thestinkingbishop

CSS 변환 및 CSS 애니메이션으로 원하는 것을 얻을 수 있습니다. 다음 데모는 스핀을 수행하는 방법을 보여줍니다 :

http://jsfiddle.net/FSkKn/

div { 
    /* add -webkit, moz, and o prefixes to the property below */ 
    /* change 2s to the time you want for one revolution */ 
    animation: spin 2s linear infinite; 
} 


@keyframes spin { 
    /* both the keyframe above and the transform properties below need prefixes */ 

    from { 
     transform:rotate(0deg) ; 
    } 

    to { 
     transform:rotate(360deg); 
    } 
}

지금 당신이 뭔가 회전을 가지고, 당신은 단지 그것을 실행하는 데 필요합니다. 가장 좋은 방법은 단추를 클릭 할 때 div (또는 사용중인 요소)에 클래스를 추가하는 것입니다.

.spin-baby-spin { 

    animation: spin 2s linear infinite; 
}

출처

2013-05-03 22:02:03

고맙지 만 작동하지 않습니다 http://jsfiddle.net/FSkKn/1/ 내가 뭘 잘못하고 있니? – thestinkingbishop

몇 가지 문제가 있습니다. 해결책은 http://jsfiddle.net/FSkKn/2/를 참조하십시오. 먼저 스핀 - 베이비 스핀 규칙에 접두어를 포함시키지 않았습니다. 두 번째로 단추에 클래스를 추가했습니다. 회전 할 div에 추가해야합니다. 하지만 버튼을 클릭 한 후에 만 그렇게하기 위해서는 버튼을 클릭 할 때 JS를 통해 클래스를 추가해야합니다. 데모에서는 classList.toggle을 사용했지만 위대한 브라우저 지원이 없으므로 선호하는 메서드를 사용하여 클래스를 추가하고 제거합니다. –

그게 효과가 있었나요? –

버튼 제어 애니메이션

답변

관련 문제