两段序列帧动画播放，在ios机型上出现闪屏

使用场景：两段序列帧动画连接播放，先播放第一段播一次，再播放第二段，第二段循环播放，在ios机型上出现动画闪动，播放不正常。

错误的写法：把每一段序列帧动画单独写在了定义的动画里

css 复制代码

.gacha-bg {
  width: 750rpx;
  height: 1000rpx;
  animation: gacha 1.6s steps(22), xing 2s steps(27);
  animation-delay: 0.8s, 2.4s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, forwards;
}

@keyframes gacha {
  0% {
    background-image: url('1.jpg');
    background-size: 17250rpx;
    background-repeat: no-repeat;
    background-position: 0;
  }
  100% {
    background-image: url('1.jpg');
    background-size: 17250rpx;
    background-repeat: no-repeat;
    background-position: -16500rpx;
  }
}

@keyframes xing {
  0% {
    background-image: url('bg.jpg');
    background-size: 21000rpx;
    background-repeat: no-repeat;
    background-position: 0;
  }
  100% {
    background-image: url('bg.jpg');
    background-size: 21000rpx;
    background-repeat:no-repeat;
    background-position: -20250rpx 0;
  }
}

修改后：

背景图需要统一写一遍，由于第二段要循环播放，所以需要在定义的第二段动画里写上图片信息

css 复制代码

.gacha-bg {
  width: 750rpx;
  height: 1000rpx;
  animation: gacha 1.6s steps(22), xing 2s steps(27);
  animation-delay: 0.8s, 2.4s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, forwards;
  background-image: url('1.jpg'),url('bg.jpg');
  background-size: 17250rpx,21000rpx;
  background-repeat: no-repeat,no-repeat;
}

@keyframes gacha {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -16500rpx 0;
  }
}

@keyframes xing {
  0% {
    background-image: url('bg.jpg');
    background-size: 21000rpx;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  100% {
    background-image: url('bg.jpg');
    background-size: 21000rpx;
    background-repeat: no-repeat;
    background-position: -20250rpx 0;
  }
}