在 Android 4.0.1 上移除动画后，CSS3 translate3d 会不断重复答案

【问题标题】：CSS3 translate3d repeats continuously upon removal of animation on Android 4.0.1在 Android 4.0.1 上移除动画后，CSS3 translate3d 会不断重复
【发布时间】：2012-05-23 23:16:04
【问题描述】：

我希望将旋转动画应用到 div，它会不断重复，直到我希望它停止。

我向我的 div 添加了包含动画参数的类“spinning”，然后使用 el.removeClass('spinning') 从 div 中删除了类“spinning”

动画有效，一旦我在 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.

【问题讨论】：

我相信 SO 上的某个人有一个 similar issue。还有another related discussion。

标签： android animation infinite translate3d

【解决方案1】：

我不知道你的 CSS，但我遇到了同样的问题 - 我的解决方案是删除 overflow: hidden;从我的容器元素。仅当容器具有动画子项时才会出现此问题。

见Difficult to stop infinite CSS animation in Android browser。

【讨论】：

【解决方案2】：

这解决了我的（非常相似的）问题：

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

【讨论】：