Hi, I have a css border than I am animating around a box. As shown here
there are 2 animations in essence.
The first one loops an infinite border around the box every 5 seconds in a circle (or square) motion.
The second is triggered when the mouse hovers on top of the square. Starting the second animation which just acts like a focus and highlights the square and the first animation is removed.
Upon when the box is removed from hover state it should go back to animation 1 loop.
However whats happening is after it hovers once animation 2 is triggered, then animation 1 after mouse out, but when hovered again the animation 1 isn’t being stopped.
The process i used was jquery .addClass and .removeClass for these animation classes.
Can someone take a look at the code for me and provide any input? Thank you!