登陆界面背景动画的css样式

为了达到更好的用户体验，登陆界面需要设计多张背景图进行动态切换
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  body{
    100%;
    height:100%;
    position:fixed;
  }
.login-section {
     100%;
    height: 100%;
    background: url(map/img/1.png) 0% 0%;
    background-size: 100% 100%;
    animation-name: bg-test1;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-webkit-keyframes bg-test1{
    0%{background:url(map/img/1.png) 0% 0%;background-size:100%  100%;}
    28%{background:url(map/img/1.png) 0% 0%;background-size:100%  100%;}

    33%{background:url(map/img/2.png) 0% 0%;background-size:100%  100%;}
    61%{background:url(map/img/2.png) 0% 0%;background-size:100%  100%;}

    66%{background:url(map/img/3.png) 0% 0%;background-size:100%  100%;}
    94%{background:url(map/img/3.png 0% 0%;background-size:100%  100%;}

    100%{background:url(map/img/1.png) 0% 0%;background-size:100%  100%;}
}
  </style>
 </head>
 <body>
    <div class="login-section">

    </div>
 </body>
</html>