Streaming live at 10am (PST)

JS end CSS animation on click

Hey guys,

Shot in the dark but I want to have an animation on one of my tabs that only happens before the user clicks the tab, then it doesn’t happen again.

I have an infinite animation happening in the codepen but does anyone know a quick jot of JS that can end the css animation?


I’m not a JS guy. So, what I would do is: duplicate the element (different class name), have one with the mouseover interaction and one without, then have the mouseover interaction end with the first going to display:none; and the second going to display:block;.

It’s a little bit of a hack but I’d think it should work fine.


Also, feel free to contact me for further code help and/or customization of third-party plugins