Background is not changing smoothly

Question

I'm working on a background for something in html. I have given it a gradient that SHOULD gradually and smoothly change throughout the css coding. This is the css code:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(#ff5569, #ff00dd);
  width: 100vw;
  height: 100vh;
  animation: bgcolor 50s ease infinite;
}

@keyframes bgcolor {
  0% {
    background: linear-gradient(#ff5569, #ff00dd);
  }
  20% {
    background: linear-gradient(#ff00dd, #FF80ED);
  }
  40% {
    background: linear-gradient(#ff80ed, #FF7373);
  }
  60% {
    background: linear-gradient(#ff7373, #c0d6e4);
  }
  80% {
    background: linear-gradient(#c0d6e4, #8a2be2);
  }
  100% {
    background: linear-gradient(#8a2be2, #ff1493);
  }
}

There is no error, but it make a very abrupt change, instead of gradually. Abrupt changes don't look good. Please help!!