<div id="bird" class="sprite bird1"></div>
.sprite {
display:inline-block;
overflow:hidden;
background-repeat: no-repeat;
background-image:url(http://res.h5jun.com/matrix/8PQEganHkhynPxk-CUyDcJEk.png);
}
.bird0 {
width:86px;
height:60px;
background-position: -178px -2px
}
.bird1 {
width:86px;
height:60px;
background-position: -90px -2px
}
.bird2 {
width:86px;
height:60px;
background-position: -2px -2px
}
#bird{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
var i = 0;
setInterval(function(){
bird.className = "sprite " + 'bird' + ((i++) % 3);
}, 1000/10);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.