CSS3 translate3d repeats continuously upon removal of animation on Android 4.0.1

Question

I want a spinning animation applied to a div, which repeats continuosly until I want it to stop.

I added class ‘spinning’, which contains the animation parameters to my div, then removed the class ‘spinning’ from the div with el.removeClass('spinning')

The animation works, and stops once I remove the class in Chrome and Safari. But on my Android testing device (4.0.1), the animation doesn't stop, and repeats continuously on removal of the animation class.

Here’s the code of the class ‘spinning’ and the rest of my animation:

    .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

I don't know your CSS but I had the same problem - my solution was to remove overflow: hidden; from my container element. The problem occured only if the container had animated children.

See Difficult to stop infinite CSS animation in Android browser.

Answer 2

This solves my (very similar) problem:

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