How do I stop CSS3 animation in Android browser?
I have a div that rotates:
<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
to an onClick event listener and it works well everywhere except iOS and Android Browser
So, okay, I just want to stop the animation on click in these browsers, not pause. So I am removing the class animated
from DIV
. It works in iOS but doesn't work in Android browser. DIV
continues to rotate.
How do I stop animation in Android browser?
Here is a jsfiddle with an example
source to share
Check it 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 like this:
-
It seems to be a browser bug with
animation-play-state: paused
, so the CSS property does indeed apply in iOS Safari (I think it looks like it on Android). I don't think you can do anything about it.
-
The button
Start/Stop
(animation) works well.
source to share