Почему к элементам которые вставлены через innerHTML не срабатывает transition or duration?

Question

[ForSureN1]

Добрый день, имеется h1 заголовок, с "Текстом", хочу заанимировать каждую букву, и для этого с помощью split('') создаю массив из этих букв, далее обворачиваю в span каждую букву и результат помещаю в этот же блок через innerHTML, далее получаю массив span, прохожу циклом, и через animate даю анимацию каждой букве, она отрабатывает, но переход из одного состояния в другое происходит как условно "display: none -> display: block", без каких либо trans,duration. Вижу что вероятнее всего эта проблема в innerHTML, но не пойму как ее исправить:

let mainText = document.querySelector('.hero__title');
    let mainTextSplit = mainText.textContent.split('');
    let newWord = '';
    mainTextSplit.forEach((item, i) => {
      newWord += `<span>${item}</span>`;
    })
    mainText.innerHTML = newWord;
    let spanMainText = mainText.querySelectorAll('span');
    spanMainText.forEach((span, i) => {
      console.log(span)
      span.animate([
        {opacity:'0'},
        {opacity:'1'}
      ], {duration: 400, delay: 200*i, easing: 'ease-in'})
    })

Answer 1

[ForSureN1]

Нашел причину проблемы, на текст наложен градиент, из за этих свойств не работает анимация

-webkit-background-clip: text!important;
-webkit-text-fill-color: transparent!important;