Gradient Hover Effect Not Taking Hold On First Hover

I am creating some product cards that start out with the image as the card. When you hover over them, the image fades to a gradient of the background color and shows the Name, Price and Shop Now button.

Problem I am having is the first time you hover over it, it is very fast and jarring. Then every subsequent time you hover over it, the easing that I added to the animation takes place and its very fluid. Any idea why the first hover is happening so fast and not taking any of the easing into account only on the first hover.


Here is my site Read-Only: [LINK](Webflow - KanoraSkinCare)

@Matthew_Lemke were you able to reach a solution? I’m having a similar issue when hovering over a div to go from 0 → 100% opacity. The first time you hover over the div upon loading the page the transition is immediate, but hover over a second time and it acts as coded (~2 second transition)