Why does my animation stutter when I hover?

Question

when I hover over the name , the animation stutters . If I keep moving my mouse over the name element then it stutters really bad and sometimes it don't even load , and I have to move my mouse a bit for it to start.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  background-color: #c5cbe3;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 62.5%;
}

.main_page {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 1fr 2fr 3fr 2fr 1fr;
  grid-template-areas: ". . ." ". . ." ". name ." ". . ." ". . .";
}

@keyframes nameAnim {
  from {
    clip-path: circle(0%);
    box-shadow: inset 0rem 0rem 0rem 0rem red;
  }
  to {
    clip-path: circle(40%);
    box-shadow: inset 10rem 0rem 10rem 0rem red;
  }
}

.name {
  grid-area: name;
  justify-self: center;
  align-self: center;
  background-color: orange;
  padding: 5rem;
  transition: all 2s;
  clip-path: polygon(2% 84%, 3% 88%, 9% 92%, 13% 92%, 17% 93%, 21% 93%, 27% 90%, 33% 84%, 41% 78%, 47% 74%, 55% 71%, 63% 73%, 71% 76%, 79% 76%, 86% 76%, 95% 76%, 99% 68%, 100% 58%, 99% 43%, 96% 32%, 93% 19%, 83% 9%, 69% 7%, 57% 4%, 43% 4%, 36% 6%, 26% 8%, 23% 17%, 18% 25%, 15% 41%, 15% 50%, 14% 61%, 12% 69%, 5% 72%);
}

.name:hover {
  animation: nameAnim 2s ease forwards;
}

.name a {
  color: white;
  font-size: 3.5rem;
  text-decoration: none;
}

<div class="main_page" id="main_page">
  <div class="name"><a href="">Name <br> Name 2 </a></div>
</div>

Answer 1

So, I commented out the clip-path properties in the animation, and it seems to be doing what it should be now. I think what's happening is that you're animating the clip-path, which means the area being tracked by the mouse is no longer "hovering," so the animation resets... and the clip-path expands back out and is once again considered "hovering."

Edit: The answer right after mine looks more correct, I like their answer better to be honest!

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  background-color: #c5cbe3;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 62.5%;
}

.main_page {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 1fr 2fr 3fr 2fr 1fr;
  grid-template-areas: ". . ." ". . ." ". name ." ". . ." ". . .";
}

@keyframes nameAnim {
  from {
    /*clip-path: circle(0%);*/
    box-shadow: inset 0rem 0rem 0rem 0rem red;
  }
  to {
    /*clip-path: circle(40%);*/
    box-shadow: inset 10rem 0rem 10rem 0rem red;
  }
}

.name {
  grid-area: name;
  justify-self: center;
  align-self: center;
  background-color: orange;
  padding: 5rem;
  transition: all 2s;
  clip-path: polygon(2% 84%, 3% 88%, 9% 92%, 13% 92%, 17% 93%, 21% 93%, 27% 90%, 33% 84%, 41% 78%, 47% 74%, 55% 71%, 63% 73%, 71% 76%, 79% 76%, 86% 76%, 95% 76%, 99% 68%, 100% 58%, 99% 43%, 96% 32%, 93% 19%, 83% 9%, 69% 7%, 57% 4%, 43% 4%, 36% 6%, 26% 8%, 23% 17%, 18% 25%, 15% 41%, 15% 50%, 14% 61%, 12% 69%, 5% 72%);
}

.name:hover {
  animation: nameAnim 2s ease forwards;
}

.name a {
  color: white;
  font-size: 3.5rem;
  text-decoration: none;
}

<div class="main_page" id="main_page">
  <div class="name"><a href="">Name <br> Name 2 </a></div>
</div>

Answer 2

You don't generally want to attach hover behavior to things that move--they pull themselves out from under your mouse. Instead, put something stationary around or over them and hover that.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  background-color: #c5cbe3;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 62.5%;
}

.main_page {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 1fr 2fr 3fr 2fr 1fr;
  grid-template-areas: ". . ." ". . ." ". name ." ". . ." ". . .";
}

@keyframes nameAnim {
  from {
    clip-path: circle(0%);
    box-shadow: inset 0rem 0rem 0rem 0rem red;
  }
  to {
    clip-path: circle(40%);
    box-shadow: inset 10rem 0rem 10rem 0rem red;
  }
}

.name {
  grid-area: name;
  justify-self: center;
  align-self: center;
  background-color: orange;
  padding: 5rem;
  transition: all 2s;
  clip-path: polygon(2% 84%, 3% 88%, 9% 92%, 13% 92%, 17% 93%, 21% 93%, 27% 90%, 33% 84%, 41% 78%, 47% 74%, 55% 71%, 63% 73%, 71% 76%, 79% 76%, 86% 76%, 95% 76%, 99% 68%, 100% 58%, 99% 43%, 96% 32%, 93% 19%, 83% 9%, 69% 7%, 57% 4%, 43% 4%, 36% 6%, 26% 8%, 23% 17%, 18% 25%, 15% 41%, 15% 50%, 14% 61%, 12% 69%, 5% 72%);
}

.name-wrapper:hover .name {
  animation: nameAnim 2s ease forwards;
}

.name a {
  color: white;
  font-size: 3.5rem;
  text-decoration: none;
}

<div class="main_page" id="main_page">
  <div class="name-wrapper">
    <div class="name"><a href="">Name <br> Name 2 </a></div>
  </div>
</div>