使用css3实现雪碧图帧动画

背景：

此需求是在html界面实现，纯原生，没有像vue生命周期那些东西。

场景：

一个单纯的图片背景，想要在上面加个动图。一瞬间脑子里想到两个方案：
一：最省前端功夫的：ui压缩一个gif图出来
二：需要前端写点代码的：把ui提供的多张图片，利用css3动画，进行动画切换，达到动图的效果

情况一：ui压缩出的gif出现白边的问题，就不太好看，而且ui已经尽力了。。。

效果图：

情况二：使用css3动画属性，也发现了不适用的问题：

效果图：截图不能展示问题

老老实实使用css3.keyframe和animation来实现，这里也发现了问题，图片够小，即使预先在head加载了图片，但是没有添加到body中，可以在network看到图片加载成功，然后在动画里使用延迟，在qq、谷歌均可以正常加载，唯独在谷歌出现依旧出现闪烁。
基于此两种解决方案：

1：在head中写一个js，其目的是，快于页面加载，就生成img标签，赋值图片路径，append到页面。
间接实现图片预先加载，而后进行css3帧动画，当然你的页面不需要用到他，你可以隐藏掉。（此方案不太优雅，但能成事）

图片形式：

js:

for(var i = 0;i<10;i++){
  var img = new Image()
  img.onload = await function () {}.bind(this)
  img.src='/static/img/'+i+'_03.png'
  document.body.append(img)
}

css:

.frame-logo .lo-wrap .img-bg{
  width: 440px;
  height: 424px;
  display: flex;
  position: absolute;
  top: 3vh;
  left: 9vw;
  background: url('/static/img/frame1/1_03.png');
  background-size:cover;
  animation: identifier_p 2s infinite;
}
@keyframes identifier_p {
  0% {
    background: url('/static/img/frame1/1_03.png');
  }
  7% {
    background: url('/static/img/frame1/2_03.png');
  }
  14% {
    background: url('/static/img/frame1/3_03.png');
  }
  21% {
    background: url('/static/img/frame1/4_03.png');
  }
  28% {
    background: url('/static/img/frame1/5_03.png');
  }
  35% {
    background: url('/static/img/frame1/6_03.png');
  }
  42% {
    background: url('/static/img/frame1/7_03.png');
  }
  49% {
    background: url('/static/img/frame1/8_03.png');
  }
  56% {
    background: url('/static/img/frame1/9_03.png');
  }
  63% {
    background: url('/static/img/frame1/10_03.png');
  }
  70% {
    background: url('/static/img/frame1/11_03.png');
  }
  77% {
    background: url('/static/img/frame1/12_03.png');
  }
  84% {
    background: url('/static/img/frame1/13_03.png');
  }
  91% {
    background: url('/static/img/frame1/14_03.png');
  }
  98% {
    background: url('/static/img/frame1/14_03.png');
  }
  100% {
    background: url('/static/img/frame1/1_03.png');
  }
}

2：使用雪碧图进行实现，将多张帧的图，合成雪碧图，然后改变位置进行实现。
animation: identifier_p 2s steps(1, start) infinite;这行代码中的steps(1, start)是实现的关键，如果没有他，这个动画相当可怕，等同于看一张不停的改变定位的背景图。有了他才能真正称为是“帧动画”，可以说是相当丝滑了，比gif体验好多了。

图片形式：

css：

.frame-logo .lo-wrap .img-bg{
  width: 440px;
  height: 424px;
  display: flex;
  position: absolute;
  top: 3vh;
  left: 9vw;
  background: url('/static/img/test/css_sprites.png');
  background-size:cover;
  animation: identifier_p 2s  steps(1, start) infinite;
}

@keyframes identifier_p {
  0% {
  background: url('/static/img/test/css_sprites.png') -10px -10px;
  }
  7% {
  background: url('/static/img/test/css_sprites.png') -488px -10px;
  }
  14% {
  background: url('/static/img/test/css_sprites.png') -10px -474px;
  }
  21% {
  background: url('/static/img/test/css_sprites.png') -488px -474px;
  }
  28% {
  background: url('/static/img/test/css_sprites.png') -966px -10px;
  }
  35% {
  background: url('/static/img/test/css_sprites.png') -966px -474px;
  }
  42% {
  background: url('/static/img/test/css_sprites.png') -10px -938px;
  }
  49% {
  background: url('/static/img/test/css_sprites.png')  -488px -938px;
  }
  56% {
  background: url('/static/img/test/css_sprites.png') -966px -938px;
  }
  63% {
    background: url('/static/img/test/css_sprites.png') -1444px -10px;
  }
  70% {
    background: url('/static/img/test/css_sprites.png') -1444px -474px;
  }
  77% {
    background: url('/static/img/test/css_sprites.png') -1444px -938px;
  }
  84% {
    background: url('/static/img/test/css_sprites.png')  -10px -1402px;
  }
  91% {
    background: url('/static/img/test/css_sprites.png') -488px -1402px;
  }
  98% {
    background: url('/static/img/test/css_sprites.png') -10px -1402px;
  }
  100% {
  background: url('/static/img/test/css_sprites.png') -488px -1402px;
  }
}