title: How to stop CSS3 animation in Android Browser?
body: <p>I have a div which spins:</p>
  
  <p><code>&lt;div class="medium animated"&gt;&lt;/div&gt;</code></p>
  
  <pre><code>.medium {
  position: absolute;
  width: 100px;
  height: 100px;
  }
  
  .animated {
  animation: spin 5s linear infinite;
  }
  
  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  </code></pre>
  
  <p>I want it to stop when I click on it. I add <code>animation-play-state: paused</code> in onClick event listener and it works good everywhere except iOS and Android Browser</p>
  
  <p>So, okay, I want just stop the animation on click in those browsers, not pause. So I remove <code>animated</code> class from the <code>DIV</code>. It works in iOS, but doesn't work in Android Browser. The <code>DIV</code> continues to spin.</p>
  
  <p>How can I stop the animation in Android Browser?</p>
  
  <p>Here is <a href="http://jsfiddle.net/h603z2eh/" rel="nofollow">jsfiddle</a> with an example</p>