CSS3 애니메이션 회전 애니메이션 속성을 제거하면 애니메이션이 원래 위치로 되돌아갑니다.

아래 코드를 사용하여 CSS3로 그래픽을 회전 할 때 (이것은 웹킷 버전이지만 내 스타일 시트에는 다른 브라우저 특정 버전이 있습니다.).CSS3 애니메이션 회전 애니메이션 속성을 제거하면 애니메이션이 원래 위치로 되돌아갑니다.

.bottomSmallCogStopAnimating { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 5000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
}

jQuery를 사용하여이 CSS 클래스를 추가하여 애니메이션 이름을 제거하여 애니메이션을 중단합니다.

.stopAnimating { 
    -moz-animation: none; 
    -webkit-animation: none; 
    animation: none; 
}

이 속성을 제거하면 그래서 제가 보는 것은 아주 나쁜 보이는 원래 회전에 그래픽 팝업가, 다시 이전 회전 된 상태로 그래픽을 다시 나타납니다.

이렇게하는 것을 막을 수있는 방법이 있습니까? 브라우저가 마지막 위치를 기억하고이 시점에서 애니메이션을 멈출 수 있습니까?

건배 스테판

출처

2012-07-10 Stefan Burt

JavaScript가 없어도 쉽게 해결할 수 있습니다. 아마도'data-'속성을 가진 가능성이 있습니다. – Labu

CSS 애니메이션은 CSS 전환이 아닙니다. – BoltClock

CSS에서 애니메이션을 제거 또는 퍼팅은 "NONE"으로, 초기 상태로 되돌아 간다.

document.getElementsByClassName('bottomSmallCogStopAnimating')[0].webkitAnimationPlayState = 'paused'

또는 클래스 이름을 추가합니다 : 당신은 사용을 일시 정지 할 수

.stopAnimating { 
-webkit-animation-play-state: paused; 
}

난 당신이 뭘 하려는지 정말 모르겠습니다.

출처

2012-07-10 10:15:19 Mircea

이 속성이 있다는 것을 몰랐습니다. 여러 요소를 잘 제어하지 못하는 다른 JS 또는 jQuery 애니메이션 라이브러리를 사용하지 않아도 문제가 해결되었습니다. 하지만 기본적으로 브라우저의 스크롤 이벤트에 의해 트리거 될 때 움직이는 톱니 바퀴 애니메이션이 있습니다. –

귀하를 환영합니다. CSS 애니메이션을 즐기십시오! – Mircea

애니메이션이 완료되면 100 % 상태를 유지하려고합니다. 맞습니까?

-webkit-animation-fill-mode:forwards;

아니 JS 필요한이 : 그래서 애니메이션이 0 %에서 100 %로하고 100 % 그건 당신이 뭘 하려는지의 경우는, 그렇게 유지에, 당신은 실제로이를 추가 할 애니메이션 애니메이션이 끝나면 100 % 상태를 유지합니다.

출처

2012-07-11 22:51:48

안녕하세요 android.nick, 이 경우 애니메이션을 일시 중지하는 것으로 충분합니다. 내 애니메이션이 페이지를 스크롤하는 사용자에게 응답하여 JS/jQuery를 사용하여 애니메이션을 실행하고 그래픽에 CSS 클래스를 추가하거나 제거하여 일시 중지해야했습니다. 그러나 미래의 프로젝트에서 유용하게 사용될 애니메이션의 방향을 조작 할 수 있다는 것을 아는 것은 유용합니다. 감사합니다. –

CSS3 애니메이션 회전 애니메이션 속성을 제거하면 애니메이션이 원래 위치로 되돌아갑니다.

답변

관련 문제