I have an animation I’d like to play when the user hovers over the JDEUT logo on my website. However, for whatever reason, this always fails the first time I hover over the div. It works as soon as I leave, and every time I try hovering after that. Why is this happening?
I found a workaround that’s a little annoying because you have to insert it on every page, but hopefully it helps someone.
It seems as though the page starts with either the hover animation at 100% or the exit animation at 0% and pauses. The solution is to place an animation on page load that sets the logo to appear as the state you want it to initially appear as. So for mine, I set it to 0% initial state.