悬停时再次运行动画答案

【问题标题】：Run animation again on hover悬停时再次运行动画
【发布时间】：2023-01-26 23:14:23
【问题描述】：

我创建了一个动画https://designordering.com/resume/。我想在悬停时再次运行动画。

.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>

你能帮我提建议吗？太感谢了！

动画在页面加载时开始，但我想在有人将鼠标悬停在圆圈上时再次运行它。运行两次很重要（或者有人将鼠标悬停在上面的时间）。再次感谢您提出建议。

【问题讨论】：

标签： animation svg hover

【解决方案1】：

我看到您发现了 SVG 标准中最恼人的缺陷之一：缺乏重新启动动画的简单方法！幸运的是，您只有 1 个元素可以重新启动。

第一：不要使用“fill: none;”请改用“透明”。当您使用“none”时，命中区域将只是笔画的宽度——而不是整个圆圈内部！我很确定您不希望有人必须精确地将鼠标悬停在笔画本身上。

悬停时，使用第二个关键帧，如下所示：

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

您需要整个动画声明。不能只做“动画名称”

这是我的整个小提琴： https://jsfiddle.net/zombiedoctor/szco1dmg/

【讨论】：

永远不要使用透明，而是使用指针事件属性。