css 循环 帧动画

<template>
    <div class="page">
        <div class="bg-img"></div>
    </div>
</template>

<style lang="scss" scoped>
.page{
  background: url("~@/assets/01/bg1.png") no-repeat center/contain;
}
.bg-img {
  position: absolute;
  top: 30px;
  width: 100%;
  height: 100%;
  animation: sg-animate 4s infinite; //在两秒内完成序列png动画图片来(回播放alternate)，并循环无限次(infinite)
 
  $bgPreUrl: "~@/assets/01/bgs/红绸00"; //序列图路径前缀
  @keyframes sg-animate {
    $len: 39; //逐帧动画画面自由39张图
    @for $i from 0 through $len {
      #{ $i * 2.5% } {
        background-image: url(#{$bgPreUrl}#{$i}.png);
        opacity: 1;
        // background-image: url("~@/assets/01/bgs/红绸0000.png");
      }
    }
    // 序列图播放完毕那一刻到100%时间（第2s结束那一刻）之间都停留在最后一张序列图静止不动
    #{ $len * 2.5% },
    100% {
      opacity: 1;
      background-image: url(#{$bgPreUrl}#{$len}.png);
    }
  }
}
</style>

方法2

img{
  display: block;
  position: absolute;
  bottom:0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
@keyframes stys{
  0%{opacity: .5;}
  100%{opacity: 0;}
}
.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
  opacity: 0;
}
.image1,.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
  animation-name: stys;
  animation-timing-function:ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
  animation-duration: 1s;
}