css3 模拟gif每桢,CSS3 animation属性中的steps实现GIF动图(逐帧动画)

相信 animation 大家都用过很多，知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转，使用 animation-timing-function 规定动画的速度曲线，常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。

今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符，可以让动画不连续，就是制作逐帧动画。

steps(n,start/end)

第一个参数 number 为把动画分为 n 步阶段性展示，表示把我们的动画分成了多少段；

第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

第二个参数具体说就是，emmmm.....................我寄几也没详细看(没理解)，附上传送门你们看下张鑫旭大神的讲解  CSS3 animation属性中的steps功能符深入介绍

这里只需要第一个参数就好了

这张素材宽高：2128*241、总共为8帧，故 steps(8)

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

.main {

margin: 100px auto;

width: 266px;

height: 241px;

background: url(./test.jpg);

backg