联通做网站白帽seo公司

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

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

.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;}
}

修改后： 

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

.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;}
}