Start Stop CSS keyframes animation with JavaScript

Learn to program interactive CSS3 keyframes animations. Meaning that you allow the user to control the animation in specific ways, which can be done through JavaScript event handling.

<style>
#ball{
	background: url(ball_bounce.png);
	width: 50px;
	height: 50px;
}
@keyframes ball-bounce {
	from { background-position: 0px; }
	to { background-position: -300px; }
}
@-webkit-keyframes ball-bounce {
	from { background-position: 0px; }
	to { background-position: -300px; }
}
</style>
<div id="ball"></div>
<button id="startbtn">Start</button>
<button id="stopbtn">Stop</button>
<script>
startbtn.addEventListener("click", function(){
	ball.style.animation = "ball-bounce 0.7s steps(6) infinite";
	ball.style.webkitAnimation = "ball-bounce 0.7s steps(6) infinite";
});
stopbtn.addEventListener("click", function(){
	ball.style.animation = "";
	ball.style.webkitAnimation = "";
});
</script>