CSS animation stops when mouse leaves element

[toolman]

Hi there,

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

Edit fiddle - JSFiddle - Code Playground

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

[ladans37]

@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.

[PaulOB]

I believe you asked this question a year ago

CSS animation continuing on hover if the user moves the mouse off?

Hi, I have the following CSS swing/shake animation: It works fine, but if the user moves their cursor off the image, the animation stops. Is there a way to keep the animation happening and finishing it’s loop even if the user takes their cursor off? Thanks

The answer is still the same

[toolman]

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

[PaulOB]

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:)