How to show parts of sprite with CSS keyframes to create animation?

问题

I'm targeting older webkit browser QT Webkit, which unfortunately doesn't support changing background image in the keyframes. So intead, I've created sprite combining all 12 frames and now am trying to go through each frame with some interval to create animation. But I have a horizontal sprite and when I try to changing background-position-x at some keyframe %, it slides.

Sprite: http://i.imgur.com/krQPw.png

Sample: http://jsbin.com/amoxef/1 (I set the animation duration longer to see what's happening. Originally I would like it to be set to 1 second for the full animation cycle).

How do I make it so that it will "jump" instead of sliding to the next frame (location in sprite)?

回答1:

You should check out the steps() option in CSS keyframes.

Here is an example that I haven't tested... just a demo of using steps()... More details here: Taking steps() with CSS animations.

#loader{
    border: 2px black solid;
    width: 800px;
    height: 480px;
    background: url('http://i.imgur.com/krQPw.png?1');
    background-position: 0px 0px;
    background-repeat: no-repeat;

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;

}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

回答2:

Finally got it: http://jsbin.com/amoxef/6

I made it so that it will stay the same location from for example 0% to 7.999% and at 8%, it will change the background-position. So, since the actual changing period is so small, it looks like it "jumps" to the next frame and stays on it until the next defined % frame.

来源：https://stackoverflow.com/questions/14178499/how-to-show-parts-of-sprite-with-css-keyframes-to-create-animation

标签

css

css3

sprite

css-animations