CSS3 animation的steps方式过渡

浏览数：45 / 时间：2015年06月09日

animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果

是连贯性的。除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。

但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。

　　比如GIF动图不支持程序对播放的控制，也不支持Alpha通道。但如果我们用一个

PNG图片，把所有帧都放在一起，通过CSS3的animation控制background-position

来播放就可以做到这些。

    <style>
    @-webkit-keyframes test {
      0% {background-position:0px -0%;}
      100% {background-position:0px -400%;}
    }
    @keyframes test {
      0% {background-position:0px -0%;}
      100% {background-position:0px -400%;}
    }
    div {
      height:35px;width:32px;
      -webkit-animation:test 400ms steps(4) infinite;
      animation:test 400ms steps(4) infinite;
      background:url(http://www.web-tinker.com/share/兔斯基揉脸.png);
    }
    </style>
    <div></div>

steps(4)表示让整个动画在4个关键帧之间切换。这个兔斯基揉脸的图片中

包含了4帧，所以这里设置了4。而且我们的动画时长是400ms，也就是说每一帧

停留100ms，这就和普通的GIF动图达到了一样的效果。而且animation可以

控制播放状态，PNG可以提供Alpha通道。不过animation这东西的兼容性

目前还不咋样，能否用于正式项目还有待考证。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS3 animation的steps方式过渡