pexichdu pexichdu - 5 months ago 24
CSS Question

make css animation works

Im new to css animation, so I got this sequence movements picture online and want to make it walks. I follow a tutorial but it doesnt work in this case. I'm trying to make it moves. I dont know how to properly do that so I start with the first row of image. its 832x228

enter image description here
and this is css code:

.sprite {
width: 130px;
height: 130px;
display:block;
background:transparent url(glitch_walker.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
}


@keyframes walker {
0% {background-position: 0 0;}
100% {background-position: 832px 0px;}
}

Answer

You are on the right path but the background-position is wrong within the keyframes. Sprite images should move from the right to the left in order to produce a moving animation and so the background position should go from 0 0 to -816px 0.

.sprite {
    width: 130px;
    height: 130px;
    display:block;  
    background:transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
    animation: walker 1s steps(8) infinite;
}


@keyframes walker {
    0% {background-position: 0 0;}
    100% {background-position: -816px 0px;}
}
<div class='sprite'></div>

Comments