CSS animation stops when mouse leaves element

Hi there,

I have the following boxes which I have added a background image hover effect:

https://jsfiddle.net/toolman/8d7q1nxj/4/

However, when the mouse leaves the box before the animation has finished, it suddenly stops/jumps.

Is there a way to the animation finish it’s full transition even if the hover has left the element?

Thanks

@toolman yeah I can see that jumps out of the transition rather than smoothly going off it haha. I have this problem too on some elements. You could try to give the transition a higher value to slow it down more, see if that has any effect.

I believe you asked this question a year ago :slight_smile:

The answer is still the same :slight_smile:

1 Like

Yep, I realised that :slight_smile: but the animation isn’t a transform, it’s a fade in effect. Unless I can achieve the fade in using transform?

Transform has nothing to do with it:)

You can animate or fade whatever you want using properties that transition or animate as required.

The technique is to add a class to start the animation or transition and then remove it when the animation is finished.

There’s an old codepen demo of mine in your previous question that shows the technique. You can create whatever animations or fade effects that you want.

Unfortunately I’m not near a computer until the end of the week so can’t throw up another demo:)