「✍ CSS」逐帧动画我们来做一个兔斯基动画，这是一张gif。 1.将gif分解帧并合成雪碧图 http://alloy

我们来做一个兔斯基动画，这是一张gif。

1.将gif分解帧并合成雪碧图

alloyteam.github.io/gopng/

最终将gif拆分为了12帧, 每一帧都是48 * 48px的小图，最终可以得到这样一张大图，宽度为 48px * 12 ，那么我取『第 i 帧』图片的时候就是background-position: (i-1)*48px 0px(从左上角开始取)。

2.剩下的部分配合上动画以及timing-function中的steps函数可以快速实现。steps(12)意思是把动画分为12个帧来播放，即从0%~100%会平均分给这12个帧，完成background-position的变化。

steps() 会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。 -- CSS解密

<!DOCTYPE html>
<html>
<body>
	<div class="tuzki"></div>
</body>

<style type="text/css">
	.tuzki{
            width: 48px;
            height: 48px;
            background:url('http://chuantu.xyz/t6/741/1604029730x1700339730.png');
            -webkit-animation: tuzki .5s steps(12) infinite;
            -moz-animation: tuzki .5s steps(12) infinite;
            animation: tuzki .5s steps(12) infinite;
	}

	@keyframes tuzki {
	    0% {
	        background-position:0 0;
	    }
	    100% {
	        background-position: 576px 0;
	    }
	}
</style>

</html>