CSS Step Animation Experiment。3D翻转的小车和兔子揉脸动画。 animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的。除了ease,linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。   GIF动图不支持程序对播放的控制,也不支持Alpha通道。这种情况我们可以用一个PNG图片,把所有帧都放在一起,通过CSS3的animation steps控制background-position来播放。steps(n)中的参数n代表总的帧数。

JavaScript
语言:
CSS
语言:
HTML
导入代码模板: