Bootstrap Snippet Animation Start,Pause and Resume using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <div id="pool" style="position:relative;
    height:120px; width:120px; border-radius:50%;
     background-image: radial-gradient(circle at 30% 30%, #009999, #000) ;">
</div>
  <br>
    <input type="button"value="Animate" onclick=
    "document.getElementById('pool').className='move';">
<input type="button"   value="Pause" onclick=
    "pause()">
<input type="button"  value="Resume" onclick="resume()">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@-webkit-keyframes move {
    0% {-webkit-transform:translate(20px);
    background-image: radial-gradient(circle at 30% 30%, #CC0000, #000) ;
    -webkit-animation-timing-function: linear;}
    25% {-webkit-transform:translate(120px);
    background-image: radial-gradient(circle at 30% 30%, #009933, #000) ;
    -webkit-animation-timing-function: linear;}
    50% {-webkit-transform:translate(220px);
    background-image: radial-gradient(circle at 30% 30%, #6600CC, #000) ;
    -webkit-animation-timing-function: linear;}
    75% {-webkit-transform:translate(320px);
    background-image: radial-gradient(circle at 30% 30%, #996633, #000) ;
    -webkit-animation-timing-function: linear;}
    100% {-webkit-transform:translate(420px);
    background-image: radial-gradient(circle at 30% 30%, #009999, #000) ;}
    }
    @keyframes move {
    0% {transform:translate(20px);
    background-image: radial-gradient(circle at 30% 30%, #CC0000, #000) ;
    animation-timing-function: linear;}
    25% {transform:translate(120px);
    background-image: radial-gradient(circle at 30% 30%, #009933, #000) ;
    animation-timing-function: linear;}
    50% {transform:translate(220px);
    background-image: radial-gradient(circle at 30% 30%, #6600CC, #000) ;
    animation-timing-function: linear;}
    75% {transform:translate(320px);
    background-image: radial-gradient(circle at 30% 30%, #996633, #000) ;
    animation-timing-function: linear;}
    100% {transform:translate(420px);
    background-image: radial-gradient(circle at 30% 30%, #009999, #000) ;}
    }
 
.move {
    animation-name: move;
    animation-duration: 2s;
    animation-timing-function: linear;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
function pause(){
document.getElementById('pool').style.animationPlayState='paused';
document.getElementById('pool').style.webkitAnimationPlayState='paused';}
function resume(){
document.getElementById('pool').style.animationPlayState='running';
document.getElementById('pool').style.webkitAnimationPlayState='running';}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animation Start,Pause and Resume"
Bootstrap 3.3.0 Snippet by daman

Related: See More

Questions / Comments:

"Animation Start,Pause and Resume" Bootstrap 3.3.0 Snippet by daman

Related: See More

Questions / Comments:

"Animation Start,Pause and Resume"
Bootstrap 3.3.0 Snippet by daman