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; //精灵图动画结束位置 } }