CSS3:实现图片轮播

/**
login页面图片切换
*/
@-webkit-keyframes slide {
0% {
background-image: url(../images/background/login_background1.jpg);
}
10%, 25% {
background-image: url(../images/background/login_background2.jpg);
}
35%, 50% {
background-image: url(../images/background/login_background3.jpg);
}
60%, 75% {
background-image: url(../images/background/login_background4.jpg);
}
85%, 100% {
background-image: url(../images/background/login_background1.jpg);
}
}
@-moz-keyframes slide {
0% {
background-image: url(../images/background/login_background1.jpg);
}
10%, 25% {
background-image: url(../images/background/login_background2.jpg);
}
35%, 50% {
background-image: url(../images/background/login_background3.jpg);
}
60%, 75% {
background-image: url(../images/background/login_background4.jpg);
}
85%, 100% {
background-image: url(../images/background/login_background1.jpg);
}
}
@-o-keyframes slide {
0% {
background-image: url(../images/background/login_background1.jpg);
}
100% {
background-image: url(../images/background/login_background1.jpg);
}
}
@keyframes slide {
0% {
background-image: url(../images/background/login_background1.jpg);
}
10%, 25% {
background-image: url(../images/background/login_background2.jpg);
}
35%, 50% {
background-image: url(../images/background/login_background3.jpg);
}
60%, 75% {
background-image: url(../images/background/login_background4.jpg);
}
85%, 100% {
background-image: url(../images/background/login_background1.jpg);
}
}
#login-full-wrapper {

background: url(../images/background/login_background1.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
-webkit-animation: slide 8s linear infinite;
-o-animation: slide 8s linear infinite;
animation: slide 8s linear infinite;
}