Stop Keyframes animation from sliding CSS3 -


i using demo http://cssdeck.com/labs/css-image-sprite-animations-with-steps-function create css3 animation. however, image of different size have:

<div id="boules"></div> 

then css:

@keyframes boules{       { background-position: 0px; }     { background-position: -1067px; }  }  #boules {   background: url(../images/boules.png) 0 0 no-repeat;   width: 133px;   height: 108px;   animation: boules 2s steps(10, end) infinite; } 

i want reproduce same effect example link above reason in version frames slide across instead of giving animation effect of still image morphs different shape.

i have tried changing steps, seconds , positioning of background still slide effect instead of animation. calculation issue?

thanks

your numbers aren't correct

if have 10 steps...

animation: boules 2s steps(10, end) infinite; 

then offset ...

to { background-position: -1067px; } 

must number divisible 10. 1067 / 10 = 106.7px means sprites fractional dimension, , not possible.

review sprite dimensions are, , check math.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -