请问大神一个关于 animation动画的问题 - css吧 - RAT

请问大神一个关于 animation动画的问题

level 1

机智的黄泥犸😘 楼主

用 animation创建一个动画后，用@keyframes分别在20%-25%，45%-50%（以此类推）部分修改背景图片，以制作一个banner的轮播动画，但是在第一次播放的时候会有一帧空白，不知道原因，循环以后就不再出现，请问大神们怎么解决这个问题，代码在楼下，图片可用其他的任意替换。

2018年10月10日 10点10分 1

level 1

机智的黄泥犸😘 楼主

<style type="text/css">
#banner {
width: 1400px;
height: 440px;
margin: 0 auto;
overflow: hidden;
background-size:cover ;
background-position: center;
background-repeat:no-repeat ;
background:url("img/lunbo/1.jpg");
/* 图1*/
animation: banner 15s infinite;
/*定义一个动画效果：动画名称 10s 无限循环*/
}
@keyframes banner {
20%{
background:url("img/lunbo/1.jpg");
/*图1*/
}
25% {
background: url("img/lunbo/2.jpg");
/*图2*/
}
45%{
background: url("img/lunbo/2.jpg");
/*图2*/
}
50% {
background: url("img/lunbo/3.jpg");
/*图3*/
}
70%{
background: url("img/lunbo/3.jpg");
/*图3*/
}
75% {
background: url("img/lunbo/4.jpg");
}
95%{
background: url("img/lunbo/4.jpg");
}
100%{
background: url("img/lunbo/1.jpg");
}
}
</style>

2018年10月10日 10点10分 2

level 1

机智的黄泥犸😘 楼主

<body>
<div id="banner"></div>
</body>

2018年10月10日 10点10分 3

level 1

机智的黄泥犸😘 楼主

这是图片，一并上传好了

2018年10月10日 10点10分 4

1