使用場(chǎng)景：兩段序列幀動(dòng)畫連接播放，先播放第一段播一次，再播放第二段，第二段循環(huán)播放，在ios機(jī)型上出現(xiàn)動(dòng)畫閃動(dòng)，播放不正常。

錯(cuò)誤的寫法：把每一段序列幀動(dòng)畫單獨(dú)寫在了定義的動(dòng)畫里

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

修改后：?

背景圖需要統(tǒng)一寫一遍，由于第二段要循環(huán)播放，所以需要在定義的第二段動(dòng)畫里寫上圖片信息

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