html - play gif once on hover and play reversed on mouseout

I want to have a GIF that plays once when you mouse over it and pauses on the last frame, and then when you move the mouse off the image it should play backwards and pause on the first frame.

I have a static image for the first and last frame, as well as separate animated GIFs playing the animation forwards and backwards, I just have no clue how I would go about programming this.

Optimally I would just use CSS but from what I know it doesn't seem possible without js/jquery, however if anyone has any ideas it would be greatly appreciated.