Stopping a CSS animation but letting its current iteration finish <p>I have the following HTML:</p> <pre><code>&lt;div class="rotate"&gt;&lt;/div&gt;​ </code></pre> <p>And the following CSS:</p> <pre><code>@-webkit-keyframes rotate { to { -webkit-transform: rotate(360deg); } } .rotate { width: 100px; height: 100px; background: red; -webkit-animation-name: rotate; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }​ </code></pre> <p>I want to know if there is a way (using JavaScript) to stop the animation but let it finish its current iteration (preferably by changing one or a few CSS properties). I have tried setting <code>-webkit-animation-name</code> to have a blank value but that causes the element to jump back to its original position in a jarring fashion. I have also tried setting <code>-webkit-animation-iteration-count</code> to <code>1</code> but that does the same thing.</p>