Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Start Stop CSS keyframes animation with JavaScript

Published :
Author :
Adam Khoury
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>