moving bg image

HTML

<div id="box"></div>

CSS

@keyframes movingbg {
    from {
        background-position:0 0;
    }
    to {
        background-position:center center;
    }
}

@-webkit-keyframes movingbg {
    from {
        background-position:0 0;
    }
    to {
        background-position:center center;
    }
}

#box {
    -webkit-animation-name: movingbg;
    -o-animation-name: movingbg;
    -ms-animation-name: movingbg;
    -moz-animation-name: movingbg;
    animation-name: movingbg;
    -webkit-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 5s;
    -o-animation-duration: 5s;
    -ms-animation-duration: 5s;
    -moz-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    background: url("http://lorempixel.com/600/400/sports/") no-repeat scroll center 0 rgba(0, 0, 0, 0);
    width: 300px;
    height: 200px;
}