css制作序列帧动画

做成gif的动画效果，用多张图片组合成。
这里主要是用到animation中的steps

像我的项目需要37张图片组合成一个效果，一直播放动画。这边就不把37张图片截图了。

.gif{
	-webkit-animation: run-gif 2s steps(1,end) infinite;
}
@-webkit-keyframes run-gif{
	0%{
		background-image: url(../../static/gif/ic_box_light_000.png);
	}
	...//中间还有很多个,37张就要37个
	100%{
		background-image: url(../../static/gif/ic_box_light_036.png);
	}
}

正常写法是像上面这样的，但是需要重复写太多的css了
配合js来写

function setGif(){
	let ht = ''
	for(let i=0;i<36;i++){
		let a = i < 10 ? `0${i}` : i
		//2.85 计算37张 1张需要的动画百分比
		ht += `
			${2.85 * i}% {
				background-image: url(../../static/gif/ic_box_light_0${a}.png);
			}
		`
	}
	let keyframes = `
		@-webkit-keyframes run-gif{
			${ht}
		}
	`
	//给body添加动画css
	var sheet = document.styleSheets[0]
	sheet.insertRule(keyframes, 0)
}

over！