悬停上的CSS逆向变形动画

Question

我的页面上有圆圈元素动画，我想要做的是在悬停时平稳地转换它，使它与原来的大小成正方形:200 px200 my。并且，鼠标离开顺利回到以前的(变形)状态。有什么想法吗？这是我的代码：

​

a {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
  color: #fff;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morphing ease-in-out 10s infinite;
}

a:hover {

}

@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

<a>sample text</a>

​

Answer 1

好了，就这样吧。在mouseover上，我们启动变形动画。在mouseout上，我们将边界半径设置为起始位置。

您可以根据您的喜好使用持续时间(以毫秒为单位)。

​

let elem = document.querySelector("a");
let morphAnim = elem.getAnimations()[0];

elem.addEventListener("mouseover", () => {
  elem.animate(morphAnim.effect.getKeyframes(), {
    easing: "ease-in-out",
    duration: 10000,
    iterations: Infinity,
    iterationStart: 0.1
  })
})


elem.addEventListener("mouseout", () => {
  elem.animate({
    borderRadius: "30% 70% 70% 30% / 30% 30% 70% 70%"
  }, {
    duration: 1000,
    fill: "forwards",
    iterations: 1
  });

})

a {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
  color: #fff;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morphing ease-in-out 10s infinite;
  animation-play-state: paused;
}

@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

<a>sample text</a>

​