<svg viewBox="0 0 200 40">
  <linearGradient id="grad--linear-1">
    <stop offset="0%" stop-color="crimson"
          class="stop-1"/>
    <stop  offset="50%" stop-color="gold"
          class="stop-2"/>
    <stop offset="100%" stop-color="teal"
          class="stop-3"/>
  </linearGradient>

  <rect fill="url(#grad--linear-1)"
        width="100%" height="100%"/>
</svg>

 stop {
      animation: colors 12s infinite;
    }
    .stop-2{
      animation-delay: 3s;
    }
    .stop-3{
      animation-delay: 6s;
    }
    @keyframes colors {
      15% {
        stop-color: crimson;
      }
      30% {
        stop-color: gold;
      }
      45% {
        stop-color: teal;
      }
      60% {
        stop-color: yellowgreen;
      }
      75% {
        stop-color: orangered;
      }
      90% {
        stop-color: purple;
      }
    }