Override page load animation with mouse over element animation

Hi!

Here is the issue:
I have an element that constantly changing color
( “page load animation” → “when page finishes loading” → “loop animation”)
Also I want to make “mouse over element” on the same element (to scale it and to make it in specific color)
But… I realized that I can’t override the first animation by hover, it still changing the color instantly and not react to “mouse over element” animation.
How can I make it to react to “mouse over element” animation in this case?
Thanks


Here is my public share link: LINK
(how to access public share link)