Any one please give me the correct approach to do this using `css3`?

1) I have on bg image it contains multiple `states` of each sprite.

i am using keyframe animation to update the each of the position of backgroud, but it not come well

How to do it? if am not wrong any one show the correct way please?

my code :

```
<div class="bg"></div>

div.bg {
    background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
    height:443px;
    width:795px;
}

@-webkit-keyframes animateBg {
    0%{ background-position :0px center}
    5.882352941176471%{ background-position :795px center}
    11.764705882352942%{ background-position :1590px center}
    17.647058823529413%{ background-position :2385px center}
    23.529411764705884%{ background-position :3180px center}
    29.411764705882355%{ background-position :3975px center}
    35.294117647058826%{ background-position :4770px center}
    41.1764705882353%{ background-position :5565px center}
    47.05882352941177%{ background-position :6360px center}
    52.94117647058824%{ background-position :7155px center}
    58.82352941176471%{ background-position :7950px center}
    64.70588235294119%{ background-position :8745px center}
    70.58823529411765%{ background-position :9540px center}
    76.47058823529412%{ background-position :10335px center}
    82.3529411764706%{ background-position :11130px center}
    88.23529411764707%{ background-position :11925px center}
    23 94.11764705882354%{ background-position :12720px center}
}

div.bg:hover {
      animation-name: animateBg;  
      animation-duration: 4s;
}

```

[jsfiddle](http://jsfiddle.net/oe27u6sq/1/)