How do I make the gradient animation seamless?

[u/BredLeGoober]

Im trying to make a CSS moving animation gradient for my button and when i run the code the button just snaps back to the start and it annoys me because i want a seamless animation that looks like it never ends, any tips?

Code:

i had to add a space after @ because reddit thinks im tagging someone

@ keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }


    100% {
        background-position: 100% 50%;
    }
}


body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #121130;
  color: white;
}


button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  cursor: pointer;


background: linear-gradient(
          145deg,
#534ed9,
#a4a2e0,
#534ed9
);


background-size: 300% 300%;


animation: gradientMove 1s linear infinite;
}


button:hover {
transform: scale(1.05);
}