animation over-rules font colors

Question

I've tried implementing a text-typing animation with javascript and css.

• since I'm a dunce in regards to any coding beyond basic Python, I keep running into a problem, where the animation (via span class = "css-typing") overrules text styles upon applying. There's a reasonable chance the problem is structural.

// Select all elements with the class "css-typing"
var elements = document.querySelectorAll('.css-typing');

// Check if elements were found
if (elements.length > 0) {
  // Loop through each element
  elements.forEach(function(divElement) {
    // Add the "overlay" class to each element
    divElement.classList.add('overlay');

    // Create a variable to store the text content of the selected element
    var str = divElement.textContent;
    divElement.textContent = ''; // Clear the content

    // Create a variable to store the initial asterisk with the same length
    var initialAsterisk = '<span style="opacity: 0; color: ">' + '&nbsp'.repeat(str.length) + '</span>';

    // Append the initial asterisk
    $(initialAsterisk).appendTo(divElement);

    // Function to start the real text writing animation for each element
    function startTextAnimation() {
      divElement.classList.remove('overlay');
      // Create spans from the content
      var spans = '<span style="color: ">' + str.split('').join('</span><span style="color: ">') + '</span>';

      // Append the spans to the <div>
      $(spans).appendTo(divElement).each(function(i) {
        // Animate the spans
        $(this).delay(100 * i).css({
          display: 'inline',
          opacity: 0,
          color: divElement.style.color // Inherit the color from the parent element
        }).animate({
          opacity: 1
        }, 100);
      });

      // Remove the initial asterisk after the real animation starts
      divElement.removeChild(divElement.firstChild);

      // Remove the mouseenter event listener to prevent the real animation from restarting
      divElement.removeEventListener('mouseenter', startTextAnimation);
    }

    // Function to reset the content to the initial asterisk for each element
    function resetToAsterisk() {
      // Remove all existing content
      divElement.textContent = '';
      divElement.classList.add('overlay');

      // Append the initial asterisk with the same length
      $(initialAsterisk).appendTo(divElement);

      // Add back the mouseenter event listener to restart the real animation
      divElement.addEventListener('mouseenter', startTextAnimation);
    }

    // Add a mouseenter event listener to start the real animation for each element
    divElement.addEventListener('mouseenter', startTextAnimation);

    // Add a mouseleave event listener to reset to the initial asterisk for each element
    divElement.addEventListener('mouseleave', resetToAsterisk);
  });
} else {
  // Handle the case where no elements with the specified class were found
  console.log('Elements with class "css-typing" not found.');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="css-typing">lorem ipsum <font color="blue">target</font> dolor</span>

The problem is, that

<span class ="css-typing">lorem ipsum <font color="blue">target</font> dolor</span>

comes out as just lorem impsum target dolor. (without the font color being implemented)

Everything I've tried to do to find a fix, has turned the code more and more chaotic.

Ideally, the animation effect would keep the color values within the text.

The overlay just acts as a blinking text cursor.