How do I stop my border animation from shifting surrounding elements?

Question

I have created an animation for when you hover over the link. Only thing is it shifts the surrounding elements with each iteration.

.project-text a {
  text-align: center;
  color: var(--font-color);
  font-size: 1.5rem;
  width: 35%;
  margin: auto;
  text-decoration: none;
  padding: 10px;
  background-color: #29335c;
  transition: color 2s linear;

}

.project-text a:hover {
  /* color: var(--tertiary-color); */
  /* border-bottom: var(--border); */
  animation: frame-button 1s infinite linear;
  border-radius: 5px;




}


@keyframes frame-button {
  0% {
    border-right: 0;
    border-bottom: greenyellow 3px solid;
    border-left: greenyellow 1px solid;
    color: greenyellow;

  }

  25% {
    border-bottom: 0;
    border-left: #04D9FF 3px solid;
    border-top: #04D9FF 1px solid;
    color: #04D9FF;
  }

  50% {
    border-left: 0;
    border-top: greenyellow 3px solid;
    border-right: greenyellow 1px solid;
    color: greenyellow;

  }

  75% {
    border-top: 0;
    border-right: #04D9FF 3px solid;
    border-bottom: #04D9FF 1px solid;
    color: #04D9FF;

  }

  100% {
    border-bottom: greenyellow 3px solid;
    border-left: greenyellow 1px solid;

  }
}

I have tried to add a transparent border to both the a tag and its hover state, I also have tried outline (but that defeats my animation style)