在Android 4.0.1上移除動畫時，CSS3 translate3d會不斷重複。

我想要一個應用於div的旋轉動畫，它會連續重複，直到我希望它停止。在Android 4.0.1上移除動畫時，CSS3 translate3d會不斷重複。

我添加類「旋轉」，其中包含了動畫的參數在我的div，然後取出從el.removeClass（「旋轉」）

的動漫作品在div類「旋轉」，則暫時停止我在Chrome和Safari中刪除該課程。但是在我的Android測試設備（4.0.1）上，動畫並沒有停下來，並在刪除動畫類時不斷重複。

這裏的類「旋轉」和我的動畫的其餘部分的代碼：

.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.

來源

2012-05-23 S.A.

我相信有人在SO的[類似的問題（http://stackoverflow.com/questions/9774329/css-transitions-applied-甚至，如果激活，之後狀態變更）。還有[另一個相關的討論]（http://stackoverflow.com/questions/955030/remove-css-from-a-div-using-jquery），以及。 – Zairja

我不知道你的CSS，但我有同樣的問題 - 我的解決辦法是刪除溢出：隱藏;來自我的容器元素。只有容器有兒童動畫時纔會出現問題。

請參閱Difficult to stop infinite CSS animation in Android browser。

來源

2012-10-25 08:39:23 huulbaek

這解決了我的（非常相似）的問題：

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

來源

2014-06-09 12:47:34

在Android 4.0.1上移除動畫時，CSS3 translate3d會不斷重複。

回答

相關問題