Какой самый эффективный способ сделать текстовую анимацию для каждой буквы

Question

Я некоторое время размышлял об этом:

Насколько я знаю, "transform" - не самое эффективное свойство для анимации. Если я хочу добиться анимации с разделением текста, преобразующей все буквы блока - например. для раскрытия текста на свитке - какой самый эффективный способ сделать это?

Вот мой подход: https://codepen.io/markusreis/pen/mdJgzOj

• Разделить текст на spans

const split = (e) => {
  e = document.querySelector( e );
  e.innerHTML = e.innerText.split('').map( l => `<span data-letter="${l}">${l}</span>`).join('')
}

• Анимация каждого диапазона

.block {

  span[data-letter] {
    position: relative;
    overflow: hidden;
    color: transparent;
    display: inline-block;
    &:before {
      color: black;
      content: attr(data-letter);
      position: absolute;
      transform: skewX(-15deg) skewY(15deg) translateY(100%);
      transition: transform .6s cubic-bezier(0.25,0,0.25,1);
    }
    @for $i from 1 through 100 {
      &:nth-of-type(#{$i}) {
        &:before {
          transition-delay: #{$i * 15}ms;
        }
      }
    }
  }

  &:hover {
    span[data-letter] {
      &:before {
        transform: skewX(0) skewY(0) translateY(0);
      }
    }
  }
}

Но особенно при наличии более или более длинных текстовых блоков анимация не будет более плавной.

Есть предложения как улучшить эффект? Я имею в виду ... некоторые веб-сайты с легкостью выполняют множество анимаций трансформации, а другие очень запаздывают. Значит, должна быть лучшая техника?!

Цените вашу помощь.