Pause|Play Button

tests/html/scripts/top.js

@@ -111,3 +111,8 @@ function topFunction() {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
 }
+// Function to pause/play the animation
+function pause_play() {
+	var div = frame_2.document.getElementById('animation');
+	div.classList.toggle('pause');
+}

tests/html/styles/top.css

@@ -91,10 +91,6 @@ th {
   height: 130px;
 }
 /*Animations*/
-.animation:active {
-  -webkit-animation-play-state: paused;
-  animation-play-state: paused;
-}
 /* Transition between 1st and the 2nd sub-image */
 .one_two {
     -webkit-animation: one_two 2s steps(2) infinite;
@@ -119,6 +115,13 @@ th {
          -o-animation: one_four 2s steps(2) infinite;
             animation: one_four 2s steps(2) infinite;
 }
+/* Pause/Play the animation */
+.pause {
+  animation-play-state: paused;
+  -o-animation-play-state: paused;
+  -moz-animation-play-state: paused;
+  -webkit-animation-play-state: paused;
+}
 @-webkit-keyframes one_two {
    from { background-position:      0px; }
      to { background-position:   66.66%; } /* Goes to 2nd sub-image */

tests/runme.sh

@@ -55,7 +55,8 @@ done
 echo '<div id="select_animation">
         <button onclick="class_one_two()">One-Two</button>
         <button onclick="class_one_three()">One-Three</button>
-        <button onclick="class_one_four()">One-Four</button>
+        <button onclick="class_one_four()">One-Four</button>&nbsp&nbsp
+        <button onclick="pause_play()"> Pause|Play </button>
       </div>
       <div class="select">'>>./html/top.html
 #####################################################################