Android 4.0.1에서 애니메이션을 제거하면 CSS3 translate3d가 계속 반복됩니다.

Question

div에 적용되는 회전 애니메이션을 원합니다. 멈추고 싶을 때까지 계속 반복됩니다.

나는 el.removeClass ('회전')

애니메이션 작품과 사업부에서 클래스 '회전'을 삭제 한 후, 내 사업부에 애니메이션 매개 변수를 포함 클래스 '회전'을 추가, 한 번 정지 Chrome 및 Safari에서 수업을 삭제합니다. 하지만 안드로이드 테스트 장치 (4.0.1)에서는 애니메이션이 멈추지 않고 애니메이션 클래스를 제거 할 때마다 계속 반복됩니다. 여기

클래스 '회전'내 애니메이션의 나머지의 코드이다 : 나는 당신의 CSS를 모르는

.spinning { 
     @include animate-spinning; 
    } 

    @mixin animate-spinning { 

    // Experimental mixin from Compass - see footnote below ** 
     @include experimental(animation-name, spinning-animation); 
     @include experimental(animation-duration, 2s); 
     @include experimental(animation-timing-function, linear); 
     @include experimental(animation-iteration-count, infinite); 
    } 

    @-webkit-keyframes spinning-animation { 
     0% {-webkit-transform: translate3d(0,-2432px,0);} 
     100% {-webkit-transform: translate3d(0,0,0);} 
    } 


    ** Experimental mixin 
    // This mixin provides basic support for CSS3 properties and 
    // their corresponding experimental CSS2 properties when the 
    // implementations are identical except for the property prefix. 

Answer 1

하지만 같은 문제가 있었다 - 내 솔루션은 오버 플로우 제거했다 : 숨겨진; 내 컨테이너 요소에서. 컨테이너에 움직이는 하위 항목이있는 경우에만 문제가 발생했습니다.

Difficult to stop infinite CSS animation in Android browser을 참조하십시오. 이건 내 (매우 유사) 문제를 해결

이

Answer 2

:

$el.removeClass('THE_ANIMATION').css('opacity', 0.99); 
window.setTimeout(function() { 
    $el.css('opacity', 1); 
}, 0);