逐渐为 SVG 设置动画

Question

我该如何解决这个问题。我需要在一个包含两个 svgs 或 imgs 的 div 上悬停动画，没关系。 当我将鼠标悬停在该 div 内时，我如何触发它，这两个 imgs 将例如移动。也许使用 Javascript，但我似乎可以在悬停时瞄准 img。只有鼠标悬停？这使得状态永远改变了。我需要帮助。谢谢！

<div class="circle">
<img id="line-1" src="line.svg" alt="line">
<img id="line-2" src="line.svg" alt="line">
<div>

.circle {
  position: relative;
  height: 150px;
  width: 150px;
  border: 6px solid black;
  border-radius: 50%;
  padding: 10px;
}

#line-1 {
positin: absolute;
left: 0;
animation: slide 1s ease-in infinite;}

#line-2 {
positin: absolute;
right: 0;
animation: slide-otherway 1s ease-in infinite;}

@keyframes slide {
   0% {
left: 0;
}

100% {
left: 20px;
}
}

@keyframes slide-otherway {
   0% {
right: 0;
}

100% {
right: 20px;
}
}

Answer 1

有了mouseenter你还需要使用mouseleave，mouseleave会在ofc时触发，muse离开