如何在彩虹风格中平滑地改变背景颜色？

background: linear-gradient(to right, red, purple);

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

div {
  animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  14% { background-position: 14% 50%; }
  28% { background-position: 28% 50%; }
  42% { background-position: 42% 50%; }
  57% { background-position: 57% 50%; }
  71% { background-position: 71% 50%; }
  85% { background-position: 85% 50%; }
  100% { background-position: 100% 50%; }
}

div {
  animation: rainbow 10s ease-in-out infinite;
  background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
}