Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

JavaScript Videos

Animation Programming

Trigger CSS Transitions to Control AnimationsStart Stop CSS keyframes animation with JavaScriptMenu Button Marker Animation TutorialTransform Rotate Image Spin Smooth Animation TutorialBubbles Content Slideshow Application JavaScript CSS HTML