CSS3 animation的steps方式过渡

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

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

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

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

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

来播放就可以做到这些。

 

    
    

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

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

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

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

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

转载于:https://www.cnblogs.com/xupeiyu/p/3944796.html

你可能感兴趣的:(CSS3 animation的steps方式过渡)