Animate back on mouse leave – Blancer.com Tutorials and projects

I was wondering how I get my mouse cursor I made with your help as well to make it animate the transition from hovering over a link back to when I leaves the <a>.

Right now the circle animates bigger with a 0,1s animation. but when I leave the link it doesn’t have a animation, it just clips to the smaller size again.

const cursor = document.querySelector(".cursor");

window.addEventListener("mousemove", (e) => {

  let x = e.pageX - window.scrollX;
  let y = e.pageY - window.scrollY;

  cursor.style.left = `${x}px`;
  cursor.style.top = `${y}px`;
});

@import url(/css/satoshi.css);
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Satoshi-Variable;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  background-color: #f0efe9;
  height: 100vh;
  width: 100%;
  cursor: none;
}

.cursor {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #f0efe9;
  mix-blend-mode: difference;
}

body:has(a:hover) .cursor {
  transform: translate(-50%, -50%);
  height: 80px;
  width: 80px;
  transition: width 0.1s linear, height 0.1s linear;
}

a {
  cursor: none;
  text-decoration: none;
  color: #0f1016;
}

div {
  border-spacing: 0;
  display: block;
}

.a1 {
  width: 50%;
  height: 25%;
}

.a2 {
  width: 60%;
  height: 50%;
}

.a3 {
  width: 50%;
  height: 25%;
}

.icon {
  padding: 5% 0 5% 10%;
  max-width: 40%;
}

.skills {
  font-family: Satoshi-Variable;
  font-weight: 600;
  font-size: 2em;
  padding-left: 10%;
  padding-top: 2%;
  padding-bottom: 2%;
  color: #0f1016;
}

.graphic_designer {
  margin-top: 2%;
  margin-bottom: 2%;
}

ul {
  list-style: none;
}

.about_me {
  padding-left: 10%;
  line-height: 2em;
  color: #0f1016;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="portfolio" content="portfolio">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meskhi Graphics</title>
  <link rel="icon" type="image/x-icon" href="/assets/Favicon.ico">
  <link rel="stylesheet" href="/css/styles.css">
  <link rel="stylesheet" href="/css/mediaqueries.css">
</head>

<body>
  <div class="a1">
    <img class="icon" src="/assets/meskhi_graphics_logo.svg">
  </div>
  <div class="a2">
    <ul class="skills">
      <li class="social_media">Social Media <br>Marketing Manager</br>
      </li>
      <li class="graphic_designer">Graphic Designer</li>
      <li><a href="#">UI/UX Designer</a></li>
    </ul>
    <p class="about_me">Hey, Ich bin David und komme aus Kalrsruhe.<br> Beruflich bewege ich mich in der Welt des Grafikdesign<br> und UI/UX Designs. Derzeit stecke ich mitten in einer<br> Weiterbildung zum Social Media Marketing Manager.
    </p>
  </div>
  <h1><a href="#">Hallo</a></h1>
  <div class="a3"></div>
  <div class="cursor"></div>
  <script src="script.js" async defer></script>
</body>

</html>