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
Post a Comment