CSS笔记-Animation之animation-timing-function的steps()方法以及精灵图动画制作

第一个参数：
一个关键帧到下一个关键帧之间过度几步，多用于精灵图制作动画，

第二个参数：
start或者end，大多数还是使用默认的end，区别在于：
设置start，
①我们是看不到第一个设定帧的（也就是from 或 0% 的那里），
②倒数第二步就是最后一个设定帧（也就是 to 或 100% 那里），
③倒数第二步就变换完成了，最后一步不会发生变化
也就是比end整体前移了一步

@keyframes grayfade {
0% {background-color: green;}
50% {background-color: blue;}
100% {background-color: red;}
}
.quickfader {animation: grayfade 1s steps(1,start) forwards;}  /*=>  blue,red,red*/
.slowfader {animation: grayfade 1s steps(1,end) forwards;}  /*=>  green,blue,red*/

精灵图的制作：

.sprite{
	    height: 740px;    
        width: 360px;		//单个动画帧的尺寸
        background: url(../src/assets/cup.png) no-repeat; //精灵图背景；
        animation-name: spriteAnimation ;       //动画名
        animation-duration: 3s ;                //整个动画单次的执行时长(精灵图从一头走到另一头的用时)
        animation-iteration-count: infinite;    //循环方式，需要设置为无限循环
        animation-timing-function: steps(16,end)  //设置步幅，一张精灵图有几个动画帧就写几
        /*animation: spriteAnimation 3s steps(16,end) infinite;  合写*/

}
@keyframes spriteAnimation {
	to{
		background-position: -5760px;   //精灵图动画结束位置
	}
}