css 将长图做成gif动画

效果

gif

加个背景看清图片内容

image.png

代码

<div class="loading"></div>

body{
background: #743efc;
}
.loading {
   background: url('../imgs/8.png') no-repeat;
   background-position: 0 0;
   background-size: 100% auto;
   width: 40px;
   height: 40px;
   animation: loading_gif 1s steps(1, start) infinite;
}

@keyframes loading_gif {
   4.347826087% {
       background-position: 0 -40px;
   }
   8.6956521739% {
       background-position: 0 -80px;
   }
   13.0434782609% {
       background-position: 0 -120px;
   }
   17.3913043478% {
       background-position: 0 -160px;
   }
   21.7391304348% {
       background-position: 0 -200px;
   }
   26.0869565217% {
       background-position: 0 -240px;
   }
   30.4347826087% {
       background-position: 0 -280px;
   }
   34.7826086957% {
       background-position: 0 -320px;
   }
   39.1304347826% {
       background-position: 0 -360px;
   }
   43.4782608696% {
       background-position: 0 -400px;
   }
   47.8260869565% {
       background-position: 0 -440px;
   }
   52.1739130435% {
       background-position: 0 -480px;
   }
   56.5217391304% {
       background-position: 0 -520px;
   }
   60.8695652174% {
       background-position: 0 -560px;
   }
   65.2173913043% {
       background-position: 0 -600px;
   }
   69.5652173913% {
       background-position: 0 -640px;
   }
   73.9130434783% {
       background-position: 0 -680px;
   }
   78.2608695652% {
       background-position: 0 -720px;
   }
   82.6086956522% {
       background-position: 0 -760px;
   }
   86.9565217391% {
       background-position: 0 -800px;
   }
   91.3043478261% {
       background-position: 0 -840px;
   }
   95.652173913% {
       background-position: 0 -880px;
   }
   100% {
       background-position: 0 -920px;
   }
}

关于keyframes 计算方式

使用sass的循环和计算来写的。
此项目我是直接用的css，所以找了个sass转css代码转换网站来转换，就不用自己计算了。
转换完就变成上面那个样子了。

sass写法

/*
*23：我的图片有23个小图
*-40px：我的width设置为40px，所以每个图间隔40px
*/
@keyframes loading_gif {
  @for $i from 1 through 23 {
    #{(100/23)*$i}%{background-position: 0 -40px*$i;}
  }
}

关于animation中steps

animation: loading_gif 1s steps(1, start) infinite;

steps第一个参数：数字

表示使用几步来执行完动画一个变化
例如：
1:一次直接过渡完
2：一次分成两步过渡的

steps第二个参数：start,end

end：保留当前帧状态，直到这段动画时间结束
(保留当前帧，我们可以看到第一帧在，最后一帧不在)
start：保留下一帧状态，直到这段动画时间结束
保留下一帧，我们可以看到第一帧不在，最后一帧在）

奉上steps参考资料
CSS3——animation中的属性--steps

透明图层png（保存即可使用）

白色背景刚好看不到，啊哈哈...
图片有点长↓

8.png