背景图片从左到右滚动效果

animation.css

#header {
    width: 100%;
    height: 764px;
    font-family: 'proxima_nova_rgregular', 'Proxima Nova', 'Helvetica Neue', Helvetica, sans-serif;
    color: #fff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background: #000 url(../images/bg-new.jpg);
    background-size: 100%;
    margin: 0 auto;
    text-align: center;
    -webkit-animation-name: zuoyou;
    -webkit-animation-duration: 500s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: zuoyou;
    -moz-animation-duration: 500s;
    -moz-animation-fill-mode: both;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: zuoyou;
    animation-duration: 500s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-moz-keyframes zuoyou {
    0% {
        background-position: 10000px bottom;
    }
    100% {
        background-position: left bottom;
    }
}

@-webkit-keyframes zuoyou {
   0% {
      background-position: 10000px bottom;
   }
   100% {
      background-position: left bottom;
   }
}

@keyframes zuoyou {
   0% {
      background-position: 10000px bottom;
   }
   100% {
      background-position: left bottom;
   }
}