.loading-wrap {
  display: inline-block;
  position: fixed;
  top: calc(50vh - 20px);
  left: 50vw;
  transform: translateX(-50%);
}

.loading-animation {
  transform: scale(0.3060869565217391) translate(0);
  width: 276px;
  height: 164px;
  background-image: url('./img/jiazaizhong3.webp');
  background-position: 0 0;
  background-size: 3864px 492px; /* 966*4, 123*4 */
  animation: keyframes-images 1.6s steps(1) infinite forwards;
}

@keyframes keyframes-images {
  0% {
    background-position: 0 0;
  }
  2.5% {
    background-position: -276px 0;
  }
  5% {
    background-position: -552px 0;
  }
  7.5% {
    background-position: -828px 0;
  }
  10% {
    background-position: -1104px 0;
  }
  12.5% {
    background-position: -1380px 0;
  }
  15% {
    background-position: -1656px 0;
  }
  17.5% {
    background-position: -1932px 0;
  }
  20% {
    background-position: -2208px 0;
  }
  22.5% {
    background-position: -2484px 0;
  }
  25% {
    background-position: -2760px 0;
  }
  27.5% {
    background-position: -3036px 0;
  }
  30% {
    background-position: -3312px 0;
  }
  32.5% {
    background-position: -3588px 0;
  }
  35% {
    background-position: 0 -164px;
  }
  37.5% {
    background-position: -276px -164px;
  }
  40% {
    background-position: -552px -164px;
  }
  42.5% {
    background-position: -828px -164px;
  }
  45% {
    background-position: -1104px -164px;
  }
  47.5% {
    background-position: -1380px -164px;
  }
  50% {
    background-position: -1656px -164px;
  }
  52.5% {
    background-position: -1932px -164px;
  }
  55% {
    background-position: -2208px -164px;
  }
  57.5% {
    background-position: -2484px -164px;
  }
  60% {
    background-position: -2760px -164px;
  }
  62.5% {
    background-position: -3036px -164px;
  }
  65% {
    background-position: -3312px -164px;
  }
  67.5% {
    background-position: -3588px -164px;
  }
  70% {
    background-position: 0 -328px;
  }
  72.5% {
    background-position: -276px -328px;
  }
  75% {
    background-position: -552px -328px;
  }
  77.5% {
    background-position: -828px -328px;
  }
  80% {
    background-position: -1104px -328px;
  }
  82.5% {
    background-position: -1380px -328px;
  }
  85% {
    background-position: -1656px -328px;
  }
  87.5% {
    background-position: -1932px -328px;
  }
  90% {
    background-position: -2208px -328px;
  }
  92.5% {
    background-position: -2484px -328px;
  }
  95% {
    background-position: -2760px -328px;
  }
  97.5% {
    background-position: -3036px -328px;
  }
  100% {
    background-position: -3312px -328px;
  }
}
/* 
.loading-wrap {
  display: inline-block;
  position: absolute;
  top: calc(50vh - 57px);
  left: calc(50vw - 100px);
  transform: scale(0.66);
}
.loading-animation {
  width: 201px;
  height: 114px;
  background-image: url('./img/sprites.png');
  background-position: -604px 0px;
  background-size: 1207px 913px;
  transform: translate(0px, 0px);
  background-repeat: no-repeat;
  animation-name: keyframes-images;
  animation-duration: 1.8s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-images {
  0% {
    width: 201px;
    height: 114px;
    background-image: url('./img/sprites.png');
    background-position: -604px 0px;
    background-size: 1207px 913px;
    transform: translate(0px, 0px);
  }

  2.22% {
    background-position: -604px -114px;
  }

  4.44% {
    background-position: -604px -228px;
  }

  6.67% {
    background-position: -604px -342px;
  }

  8.89% {
    background-position: -604px -456px;
  }

  11.11% {
    height: 115px;
    background-position: 0px 0px;
  }

  13.33% {
    background-position: -201px 0px;
  }

  15.56% {
    width: 202px;
    height: 114px;
    background-position: 0px -115px;
    transform: translate(-1px, 0px);
  }

  17.78% {
    background-position: 0px -229px;
  }

  20.00% {
    width: 201px;
    background-position: 0px -571px;
    transform: translate(0px, 0px);
  }

  22.22% {
    width: 202px;
    background-position: -402px 0px;
    transform: translate(-1px, 0px);
  }

  24.44% {
    width: 201px;
    background-position: -201px -571px;
    transform: translate(0px, 0px);
  }

  26.67% {
    background-position: -402px -571px;
  }

  28.89% {
    background-position: -603px -571px;
  }

  31.11% {
    background-position: 0px -685px;
  }

  33.33% {
    width: 202px;
    background-position: -402px -114px;
    transform: translate(-1px, 0px);
  }

  35.56% {
    background-position: -402px -228px;
  }

  37.78% {
    width: 201px;
    background-position: -201px -685px;
    transform: translate(0px, 0px);
  }

  40.00% {
    background-position: -402px -685px;
  }

  42.22% {
    background-position: -603px -685px;
  }

  44.44% {
    background-position: -805px 0px;
  }

  46.67% {
    background-position: -805px -114px;
  }

  48.89% {
    background-position: -805px -228px;
  }

  51.11% {
    width: 202px;
    background-position: 0px -343px;
    transform: translate(-1px, 0px);
  }

  53.33% {
    width: 201px;
    background-position: -805px -342px;
    transform: translate(0px, 0px);
  }

  55.56% {
    width: 202px;
    background-position: -202px -343px;
    transform: translate(-1px, 0px);
  }

  57.78% {
    background-position: 0px -457px;
  }

  62.22% {
    width: 201px;
    background-position: -805px -456px;
    transform: translate(0px, 0px);
  }

  64.44% {
    width: 202px;
    background-position: -202px -457px;
    transform: translate(-1px, 0px);
  }

  66.67% {
    width: 201px;
    background-position: -805px -570px;
    transform: translate(0px, 0px);
  }

  68.89% {
    background-position: -805px -684px;
  }

  71.11% {
    background-position: 0px -799px;
  }

  73.33% {
    background-position: -201px -799px;
  }

  75.56% {
    background-position: -402px -799px;
  }

  77.78% {
    background-position: -603px -799px;
  }

  80.00% {
    background-position: -804px -799px;
  }

  82.22% {
    background-position: -1006px 0px;
  }

  84.44% {
    background-position: -1006px -114px;
  }

  86.67% {
    background-position: -1006px -228px;
  }

  88.89% {
    background-position: -1006px -342px;
  }

  91.11% {
    background-position: -1006px -456px;
  }

  93.33% {
    background-position: -1006px -570px;
  }

  95.56% {
    background-position: -1006px -684px;
  }

  97.78%,
  100% {
    background-position: -1006px -798px;
  }
} */