Browsers treat an external SVG used as a mask-image like a static resource, so its CSS animations don’t restart on each hover — they only run once when the SVG is first loaded. That’s why you see it animate the first time but not again until a reload or cache reset. To make it replay every hover, you’ll need to “reset” the animation by either embedding the SVG inline in your HTML (so you can toggle classes or animation properties directly on hover), or by forcing the browser to reload the resource (e.g., swapping the mask URL with a query string like mask-image: url(...svg?${Date.now()})). Inline SVG with hover-triggered animations is usually the cleanest solution because you get full control over when the animation starts .