Hi, I have a css border than I am animating around a box. As shown here https://codepen.io/jeremydricard/pen/MdPaRY
there are 2 animations.

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", ".removeClass", and on "animationend" for these animation classes.
Can someone take a look at the code for me and provide any input? Thank you!