我想做个简单的登录页面，大概的思路是整个页面做一个图片轮播，而页面的右侧或中间放登录表单。
通过搜索最终使用的@keyframes，我的问题是可以完成图片轮播，但是为什么第一次轮播的时候感觉页面像是刷新了一下的，而第二次到第N次的轮播则非常平滑，我想问如何解决这个第一次刷新的问题，可以复制我的代码看一下具体情况，以下是我的html代码：
<!DOCTYPE html>
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
用户登录
以下是我的css代码：
body{
/*设置背景图片轮播*/
animation: shuffling 25s infinite;
}
@keyframes shuffling {
0% {
background: url("../../images/user/user_background-1.jpg");
}
10% {
background: url("../../images/user/user_background-1.jpg");
}
20% {
background: url("../../images/user/user_background-1.jpg")
}
30% {
background: url("../../images/user/user_background-2.jpg")
}
40% {
background: url("../../images/user/user_background-2.jpg")
}
50% {
background: url("../../images/user/user_background-3.jpg")
}
60% {
background: url("../../images/user/user_background-3.jpg")
}
70% {
background: url("../../images/user/user_background-4.jpg")
}
80% {
background: url("../../images/user/user_background-4.jpg")
}
90% {
background: url("../../images/user/user_background-5.jpg")
}
100% {
background: url("../../images/user/user_background-5.jpg")
}
}
}
