逐渐设置SVG动画

Question

我怎么才能解决这个问题。我需要在悬停包含两个svg或img的div时设置动画，不要紧。当我在div中悬停时，如何触发，例如，两个img将会移动。也许使用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

随着鼠标输入你也需要使用mouseleave，mouseleave将在ofc时触发，muse离开