Bootstrap Snippet Sprite Image Animation Actions using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 ---------->
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi" id="pool"></div>
 <br>
<input type="button"   value="Pause" onclick="pause()">
<input type="button"  value="Resume" onclick="resume()">
<input type="button"  value="Reset" onclick="reset()">
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
.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    
    -webkit-animation: play 2s steps(10) infinite;
       -moz-animation: play 2s steps(10) infinite;
        -ms-animation: play 2s steps(10) infinite;
         -o-animation: play 2s steps(10) infinite;
            animation: play 2s steps(10) infinite;
}
@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}
@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}
@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// $("#click").click(function()$("#animation").css("-webkit-animation-play-state", "running");            
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';}
function reset(){
document.getElementById('pool').style.animationPlayState='paused';
document.getElementById("pool").style.backgroundPosition = "0px 0px";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sprite Image Animation Actions"
Bootstrap 3.3.0 Snippet by daman

Related: See More

Questions / Comments:

"Sprite Image Animation Actions" Bootstrap 3.3.0 Snippet by daman

Related: See More

Questions / Comments:

"Sprite Image Animation Actions"
Bootstrap 3.3.0 Snippet by daman