Make gifs finish their animation on hover ?

So i want to make my navigation bar animated, and i want it to where when you hover over, ittl pop up in flames, but it looks wierd if they unhover mid animation and the flames just disapeer, is there anyway to have some kind of javascript or code to make it to where if they hover, the animation is forced to play all the way through or to play a " unhovered " animation ?

Better yet is there a way to play a " start animation " on hover then switch to a loop animation that will play as long as the mouse cursor is on the button?
then to play a " unhovered " animation after the mouse takes off the button ?

burbigo2 wrote:Hey, I would love to help but I don't know much about animation

Please do not post unless you are offering a solution or advice.

bump

Hello @SpyroDragon,

I don't know if I understood the idea correctly because from what I see on your forum you already use the

Code: :hover

So you just need to change, for example the logout button:

Code:

#i_icon_mini_logout {
 background: url(https://i.servimg.com/u/f39/17/84/98/50/logout10.gif) no-repeat 0 0;
  height:133px;
  width:196px
}

To the gif image URL
and

Code:

#i_icon_mini_logout:hover {
 background: url(https://i.servimg.com/u/f18/17/84/98/50/logout10.png) no-repeat 0 0;
}

to the "no-gif" image URL

Hello @SpyroDragon

I have found this online maybe this will help you

 Helpful links / sites:
https://stackoverflow.com/questions/20052672/pause-a-webkit-animation-on-hover
https://codepen.io/MarkAlmond/pen/BHghr
https://www.w3schools.com/cssref/css3_pr_animation-play-state.asp

ah i was looking for something similar, those are pause on hover, I want them to finish the loop on hover so when they unhover, the animation finishes ,-- nvm it seems this is too complicated and ive givin up on attempting this at the current moment in time, may revisit in the future.