Hello Webflow forum!
I am having an issue with a hover interaction I have created for the navigation links on a client site. When I hover over the link and keep the mouse on it long enough for it to complete, the animation seems to work fine (I think…). However, if I hover only for a second and then take my mouse off, the animation seems to get stuck and the link ends up changing the background color until I hover over it again.
I am sure this is just a timing issue, but I am not sure how exactly to fix it.
Any advice or suggestions is appreciated! Thanks! 
Here is my public share link: LINK
(how to access public share link)
Hi there,
When CSS transitions and interactions are applied to the same element, they can compete with each other and create unexpected behavior. To achieve smoother animations, here’s what you should do:
Remove any CSS transitions from the element you’re animating with interactions. Instead, use transform and opacity properties in your interactions as they’re more performance-efficient and don’t trigger browser reflows. For example, use transform: scale() instead of width/height changes, and transform: translateX/Y() instead of position adjustments.
These properties work better because they only affect the compositing layer of the element rather than forcing the browser to recalculate the entire layout with each animation frame.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
That usually happens when the hover-out animation is shorter or missing a reset state. Try adding a defined “hover out” interaction that returns the background to its default, and make sure both in/out timelines match in duration.