Hello,
I have an svg that I animated,
The animation works smoothly, and I have it set to animation-fill-mode: forwards to that it stays put after it’s done animating.
currently, in the svg html, I have the stroke set to none, and then in the @keyframes css, I have it:
from{ stroke: none; }
to { stroke: #fff; }
once it’s done animating, I want the strokes to change color on :hover, which it does.
but once I move the cursor away, the animation starts over.
how would I go about making the SVG return right back to it’s #FFF stroke without triggering the animation after the hover is complete?
Here’s my codepen
