使用场景:两段序列帧动画连接播放,先播放第一段播一次,再播放第二段,第二段循环播放,在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;
}
}