Removing mouse sensitivity from an SVG @Keyframes animation

How come this flicker animation starts only on mouse hover without it even being specified in the code?

What is causing that to happen?

Every time you move your mouse the animation starts up, what is causing this to happen?

Why is it mouse sensitive, and how would I turn that off?

How would I remove that and have it start by itself without mouse hover?

Code

To reproduce, open it up like this, and hit run.

You’ll see the animation doesn’t start unless the mouse is over the image.

It looks like problems with jsfiddle again.

Do you use jsfiddle as an editor to write code? Hopefully not.

Write code in a real text editor and test it in a real browser.

Though I’m not sure what to think of that flicker effect, it does work when you run it in a browser.

flicker-1.html (2.7 KB)

Actually it looks like your mouse has to leave the browser chrome and enter into the viewport for animation to begin.

2 Likes

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