animation的steps()用法详解

一.steps介绍

steps()是一个timing function(animation中),允许我们将动画或者过渡分割成段,而不是从一种状态持续到另一种状态的过渡。

Steps()

两个参数:第一个参数是一个正值,指定动画分割的段数。第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。start 第一帧是动画结束的时候状态; end 第一帧是动画开始的时候状态

这面是示例图:

animation的steps()用法详解_第1张图片

二.列子

1.steps(4, end)与steps(4, start)的区别

 





 	Steps() Demo - Car
 	
 	


	
(4,end)
(4,start)

 

2.兔斯基卖萌:结合background-position

图片有多长(x),只要控制单个的大小,不要计算距离位置,直接最后background-position: 0 -y;然后直接百分之百到这个位置。分几步就让n等于多少。参考上边的end时的用法或者默认状态下的用法

 





兔斯基 卖萌



	
兔斯基 卖萌

 

steps(4,end)表示让整个动画在4个关键帧之间切换。这个兔斯基揉脸的图片中包含了4帧,所以这里设置了4。而且我们的动画时长是4s,也就是说每一帧停留1s,这就和普通的GIF动图达到了一样的效果。

图片如下:

你可能感兴趣的:(css3)