animation的steps()用法详解

一.steps介绍

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

Steps(，)

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

这面是示例图：

二.列子

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

 

 	
 	
 	


	

		

			

				
				
			
			
(4,end)
			

				
					
				
				
					
				
			
		
		

			

				
				
			
			
(4,start)
			

				
					
				
				
					
				
			
		
	

 

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

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

 

	
兔斯基 卖萌

 

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

图片如下：