I am trying to create an animated button using a sprite sheet. The animation should play on hover and then on mouseout the animation should finish and then stop. 

How can I go about doing this? I have tried setting the background of a div and controlling the background position through hover events. I can get the background position to set itself properly but each change goes so fast it might as well be instant and so the animation does not show itself. 

Any suggestions would be helpful. After a lot of searching with no luck I am not sure what else to try.

Thank You!