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

HTML & CSS
1

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

2

You would need JS to add a class on mousenter to start the animation and then when the mouse leaves the area remove the class but wait for animation-end first.

1 Like
3

…better still, remove the twentieth century aggravation altogether.

coothead

3 Likes
4

Thanks for the replies.

I have now made this:

It works on the fiddle, but when I add it to my site, it doesn’t work. I have checked my console and there are no errors.

Does anyone know what would cause this? I have tried using $ instead of jQuery, but that throws errors.

5

Note

Animation should almost always be user controlled or very short in duration . Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, totally inaccessible.

WCAG 2.0 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.

https://webaim.org/techniques/images/

2 Likes
6

Thanks, @TechnoBear, I will probably just have it loop once.

7

We’d need to see the place where it doesn’t work :slight_smile:

Do you have the scripts in the right place (e.g. at the bottom of the html)? Are you using compatible version of jquery etc?

Your fiddle isn’t working for me anyway as it just infinitely carries on after you have hovered. I think the problem is that as you have the animation value as infinite then there never is an animation end as such. I think you need aninationiteration instead to stop after an iteration.

Here’s a codepen that seems to work but probably needs a JS guru to do properly :slight_smile:


(modern browsers only i.e. Not IE11)

What seemed like a simple question at the start is indeed quite complex.:slight_smile:

1 Like
8

Thank you @PaulOB, that worked fantastically!

Yes, I think I have all my JS in the right place, I have been enquing it in WordPress correctly :slight_smile:

Thanks again

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.