How to make an animation smooth?

Question

I have this code:

button {
  position: relative;
  height: 50px;
  width: 101px;
  background: linear-gradient(45deg, red, green, blue);
  border: none;
  outline: none;
  border-radius: 4px;
  color: white;
  transition: 500ms ease;
  animation: anim 500ms linear infinite;
}

@keyframes anim {
  0% {
    background: linear-gradient(45deg, red, green, blue);
  }
  50% {
    background: linear-gradient(45deg, blue, green, red);
  }
  100% {
    background: linear-gradient(45deg, red, green, blue);
  }
}

<button> </button>

But the animation is not smooth. It's like play pause play pause.

I tried a few answers of Stack Overflow but those are not working for backgrounds.