Run animation again on hover

Question

I created an anim https://designordering.com/resume/. I would like to run the animation again on hover.

.circle1 {
  fill: none;
  stroke: #000;
  stroke-width: 5px;
  stroke-dasharray: 345;
  stroke-dashoffset: 320;
  animation: anim 2s linear forwards;
}

@keyframes anim {
  100% {
    stroke-dashoffset: 157.5;
  }
}


/*I was trying this doesn't work*/

:hover {
  animation-play-state: running;
}

<div class="app-skills">
  <div class="app-circle">
    <div class="outer">
      <div class="inner">
        <img class="app-logos" src="http://127.0.0.1:5500/img/Adobe-Illustrator.png" alt="js logo" width="35px">
      </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
      <circle class="circle1" cx="45" cy="45" r="40"
        stroke-linecap="round" />
    </svg>
  </div>
  <div class="app-name">
    <p>Adobe<br> Illustrator</p>
  </div>
</div>

Can you help me with advices? thank you so much!

The animation starts when the page is loaded but I would like to run it again when someone hover over the circle. It is important to run twice (or as much time someone hover over it). Thank you so much again in advence to your advices.

Answer 1

I see you've discovered one of the most annoying flaws in the SVG standard: the lack of an easy way to restart animations! Luckily, you only have 1 element to restart.

First: don't use "fill: none;" use "transparent" instead. When you use "none", the hit area will be the width of the stroke only -- not the entire inside of the circle! I'm pretty sure you do not want someone having to precisely hover over the stroke itself.

On hover, use a second keyframe, like this:

circle:hover{
    animation: anim2 2s 1 linear forwards;
}

You need the whole animation declaration. Can't just do "animation-name"

Here's my whole fiddle: https://jsfiddle.net/zombiedoctor/y0qwbu84/