Stopping and Starting Animations

You can stop and resume an animation through the animation-play-state property.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            #myID { 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgray; 
            } 
            #myID { 
                -webkit-animation-duration: 5000ms; 
                -webkit-animation-iteration-count: infinite; 
                -webkit-animation-direction: alternate; 
                -webkit-animation-timing-function: linear; 
                -webkit-animation-name: 'GrowShrink'; 
            } 
            @-webkit-keyframes GrowShrink { 
                from { 
                    font-size: large; 
                    border: medium solid black; 
                } 
                to { 
                    font-size: x-large; 
                    border: medium solid white; 
                    background-color: green; 
                    color: white; 
                    padding: 4px; 
                } 
            } 
        </style> 
    </head> 
    <body> 
        <p id="myID"> 
            <span id="myID">CSS</span>
        </p> 
        <p> 
            <button>Running</button> 
            <button>Paused</button> 
        </p> 
        <script> 
            var buttons = document.getElementsByTagName("BUTTON"); 
            for (var i = 0; i < buttons.length; i++) { 
                buttons[i].onclick = function(e) { 
                    document.getElementById("myID").style.webkitAnimationPlayState = 
                        e.target.innerHTML; 
                }; 
            } 
        </script> 
    </body> 
</html>

Click to view the demo

Home
HTML CSS Book
CSS

Animations:

CSS animations defines how to move from one CSS style to another.
Reusing Key Frames
Stopping and Starting Animations