<div class="l-wrapper">
  <p class="c-text js-span-wrap-text">これは一文字ずつアニメーションする<br />もじのサンプルです
  </p>
</div>

.l-wrapper {
  padding: 50px;
}

.c-text {
  font-size: 20px;
  line-height: 1.4;
  span {
    display: inline-block;
    opacity: 0;
    @for $i from 1 through 30 {
      &:nth-child(#{$i}) {
        animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) #{$i * 0.1}s forwards;
      }
    }
  }
}

@keyframes text {
  0% {
    opacity: 0;
    transform: translateX(-20px) translateY(-10px) scale(1.3);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

class SpanWrap {
  constructor(target) {

    this.target = this.convertElement(target);
    this.nodes = [...this.target.childNodes];

    this.convert();
  }

  convert() {

    let spanWrapText = ""

    this.nodes.forEach((node) => {
      if (node.nodeType == 3) {//テキストの場合
        const text = node.textContent.replace(/\r?\n/g, '');//テキストから改行コード削除
        //spanで囲んで連結
        spanWrapText = spanWrapText + text.split('').reduce((acc, v) => {
          return acc + `<span>${v}</span>`
        }, "");
      } else {//テキスト以外
        //<br>などテキスト以外の要素をそのまま連結
        spanWrapText = spanWrapText + node.outerHTML
      }
    })

    this.target.innerHTML = spanWrapText

  }


  //jQueryオブジェクトや文字列セレクターを変換
  convertElement(element) {
    if (element instanceof HTMLElement) {
      return element
    }
    if (element instanceof jQuery) {
      return element[0]
    }
    return document.querySelector(element);
  }

}

new SpanWrap(".js-span-wrap-text");