<p class="text-onebyone">
      <span class="for-accessibility">1文字ずつ表示させる</span>
      <span class="text-split">1文字 ずつ 表示 させる</span>
    </p>
.text-onebyone {
  position: relative;
  .text-split {
    font-size: 4rem;
    clip-path: inset(0 0 0);
    .text-each {
      display: inline-block;
      opacity: 0;
      transform: translateY(100%);
      &.is-active {
        transition: 1s;
        opacity: 1;
        transform: translateY(0%);
      }
    }
  }
  .for-accessibility {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
  }
}
View Compiled
const textOneByOne = document.querySelector(".text-split");
let getText = textOneByOne.textContent;
textOneByOne.textContent = "";
getText = getText.split("");
getText.forEach(function (elem, index) {
  const newText = "<span aria-hidden='true' class='text-each'>" + elem + "</span>";
  textOneByOne.insertAdjacentHTML("beforeend", newText);
});

const textEach = textOneByOne.querySelectorAll(".text-each");
const delayTime = 100; //何秒遅れで次の文字が表示されるか設定

textEach.forEach(function (elem, index) {
  setTimeout(function () {
    elem.style.transitionDelay = delayTime * index + "ms";
    elem.classList.add("is-active");
  }, delayTime);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.