首页 文章

如何用CSS关键帧显示sprite的部分来创建动画？

提问于
浏览 次
1

我支持在关键帧中更改背景图像 . 所以intead，我已经创建了组合所有12帧的精灵，现在我试图以一定的间隔遍历每一帧来创建动画 . 但我有一个水平精灵，当我尝试在某个关键帧％更改 background-position-x 时，它会滑动 .

精灵：http://i.imgur.com/krQPw.png

示例：http://jsbin.com/amoxef/1（我将动画持续时间设置得更长，看看发生了什么 . 原来我希望在完整的动画周期中设置为1秒） .

如何使它“跳”而不是滑动到下一帧（精灵中的位置）？

css css3 sprite css-animations

2 回答

  • 3

    您应该查看CSS关键帧中的 steps() 选项 .

    这是一个我没有测试的例子......只是使用 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

    终于明白了：http://jsbin.com/amoxef/6

    我做到了它将保持相同的位置，例如0％到7.999％和8％，它将改变 background-position . 因此，由于实际的变化周期很小，它看起来像是下一帧的"jumps"并一直保持到下一个定义的％帧 .

    回复于

相关问题