Sprite animation jumps at the begining

[hwinnum]

I am creating a sprite animation of a treasure chest opening. I have made 7 stages placed next to each other on a single "png" format image. It works fine with the following code but for some reason at the beginning of the animation the image jumps up. I thought it was a problem with the image and that the first stage may have been a little lower than the others. This was not the case, so I am left not knowing what the problem is. Can anyone enlighten me to what the problem is?\[code\]body {text-align: center;}@-webkit-keyframes wink { from { background-position: 0px; } to { background-position: -3600px; }}@-moz-keyframes wink { from { background-position: 0px; } to { background-position: -3600px; } }@keyframes wink { from { background-position: 0px; } to { background-position: -3600px; }}.chest { background-image: url("file://///FILESERVER/scratch/Sean/sprite2.png"); height: 600px; margin: 0 auto; width: 550px;}.chest:hover { -webkit-animation: wink 2.5s steps(6, end) 1 forwards; -moz-animation: wink 2.5s steps(6, end) 1 forwards; animation: wink 2.5s steps(6, end) 1 forwards;}\[/code\]