<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <img src="http://s.cdpn.io/79/sprite-steps.png" /> <div class="hi" id="pool"></div> <br> <input type="button" value="Pause" onclick="pause()"> <input type="button" value="Resume" onclick="resume()"> <input type="button" value="Reset" onclick="reset()">

.hi { width: 50px; height: 72px; background-image: url("http://s.cdpn.io/79/sprite-steps.png"); -webkit-animation: play 2s steps(10) infinite; -moz-animation: play 2s steps(10) infinite; -ms-animation: play 2s steps(10) infinite; -o-animation: play 2s steps(10) infinite; animation: play 2s steps(10) infinite; } @-webkit-keyframes play { from { background-position: 0px; } to { background-position: -500px; } } @-moz-keyframes play { from { background-position: 0px; } to { background-position: -500px; } } @-o-keyframes play { from { background-position: 0px; } to { background-position: -500px; } } @keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

// $("#click").click(function()$("#animation").css("-webkit-animation-play-state", "running"); function pause(){ document.getElementById('pool').style.animationPlayState='paused'; document.getElementById('pool').style.webkitAnimationPlayState='paused';} function resume(){ document.getElementById('pool').style.animationPlayState='running'; document.getElementById('pool').style.webkitAnimationPlayState='running';} function reset(){ document.getElementById('pool').style.animationPlayState='paused'; document.getElementById("pool").style.backgroundPosition = "0px 0px"; }