CSS reverse morphing animation on hover

Question

i have circle element animating on my page, what i try to do is to smoothly transition it on hover, to be just a square with it original size: 200px x 200px. And also, on mouse leave to smoothly back to previous (morphing) state. Any ideas? Heres my code:

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

Ok, so here it goes. On mouseover, we start the morphing animation. On mouseout, we set the border radius to start position.

You can play with duration (which is in milliseconds) as per your liking.

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>