肥乡专业做网站,深圳网站设计排名,制作ppt模板的软件,wordpress数据库代码使用场景#xff1a;两段序列帧动画连接播放#xff0c;先播放第一段播一次#xff0c;再播放第二段#xff0c;第二段循环播放#xff0c;在ios机型上出现动画闪动#xff0c;播放不正常。
错误的写法#xff1a;把每一段序列帧动画单独写在了定义的动画里
.gacha-bg…使用场景两段序列帧动画连接播放先播放第一段播一次再播放第二段第二段循环播放在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;}
}
