diff options
-rw-r--r-- | tests/html/scripts/top.js | 5 | ||||
-rw-r--r-- | tests/html/styles/top.css | 11 | ||||
-rwxr-xr-x | tests/runme.sh | 3 |
3 files changed, 14 insertions, 5 deletions
diff --git a/tests/html/scripts/top.js b/tests/html/scripts/top.js index 072736cc9..dc9c9772c 100644 --- a/tests/html/scripts/top.js +++ b/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'); +}
\ No newline at end of file diff --git a/tests/html/styles/top.css b/tests/html/styles/top.css index a41fbd5ea..a47d70e55 100644 --- a/tests/html/styles/top.css +++ b/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 */ diff --git a/tests/runme.sh b/tests/runme.sh index 9ed209e93..fe689d8e3 100755 --- a/tests/runme.sh +++ b/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>   + <button onclick="pause_play()"> Pause|Play </button> </div> <div class="select">'>>./html/top.html ##################################################################### |