Как медленно перевести цвет текста, изменяющего бесконечность цвета, в один сплошной цвет?

Question

Здравствуйте, ребята из stackoverflow,

Я не могу, на всю жизнь, обернуть голову вокруг этого. Как я могу медленно перевести этот изменяющий цвет текст из его текущего цвета в любой другой сплошной цвет (после нажатия кнопки «Отправить»). Есть ли профессионал, который может решить эту «загадку»? Это было бы очень признательно.

Пример кода:

jQuery('.text').html(function(i, html) {
  var chars = jQuery.trim(html).split("");
  return '<span>' + chars.join('</span><span>') + '</span>';
});

jQuery('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function() {
    console.log('submitting');
  }, 2000);
  document.querySelector('#textdisplay > span').classList.remove('anim');
  document.getElementById("textdisplay").style.color = "yellow";
});

#textdisplay span.anim {
  -webkit-animation-name: color-text-flow-keys;
  animation-name: color-text-flow-keys;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  25% {
    color: #5cd666;
  }
  50% {
    color: #d67e5c;
  }
  100% {
    color: #64d65c;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
      <form id="form1">
        <input type="text" name="username" placeholder="Username" id="username" required>
        <button type="submit" id="submitbutton">submit</button>
      </form>
    </div>
    <div id="container">
      <div id='textdisplay'>
        <span class="anim">BlueBox</span>
      </div>
    </div>

Answer 1

добавить код ниже в jquery для tarnsition с 2s

  document.getElementById("textdisplay").style.transition = "2s";

Я думаю, что это поможет вам