How to stop CSS3 animation in Android Browser?

Question

I have a div which spins:

<div class="medium animated"></div>

.medium {
position: absolute;
width: 100px;
height: 100px;
}

.animated {
animation: spin 5s linear infinite;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

I want it to stop when I click on it. I add animation-play-state: paused in onClick event listener and it works good everywhere except iOS and Android Browser

So, okay, I want just stop the animation on click in those browsers, not pause. So I remove animated class from the DIV. It works in iOS, but doesn't work in Android Browser. The DIV continues to spin.

How can I stop the animation in Android Browser?

Here is jsfiddle with an example

that's strange - it works in Android Browser.. then something else in my markup or JS breaks this... — dimaninc, Jun 03 '15 at 17:39

score 1 · Accepted Answer · answered Jun 03 '15 at 18:08

Check this out — http://jsfiddle.net/sergdenisov/hpvqfut5/4/.

$('.js-start-stop').on('click', function() {
    $('.js-circle').toggleClass('circle_animated');
});

$('.js-continue-pause').on('click', function() {
    $('.js-circle').toggleClass('circle_paused');
});

.circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
}

    .circle__sector {
        float: left;
        width: 10%;
        height: 100%;
        background: yellow;
    }

    .circle_animated {
        -webkit-animation: spin 5s linear infinite;
        animation: spin 5s linear infinite;
    }

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

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }    
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="circle circle_animated js-circle">
    <div class="circle__sector"></div>
</div>
<button class="js-start-stop" type="button">Start/Stop</button>
<button class="js-continue-pause" type="button">Continue/Pause</button>

I tested on Android Browser 4.1.2 and iOS Safari 8.3 and could say so:

It seems like browser bug with animation-play-state: paused, cause CSS property is really applied in iOS Safari (I think on Android it's similar). I think you can do nothing with it.
Button Start/Stop (animation) works well.

How to stop CSS3 animation in Android Browser?

1 Answers1