【CSS】【javascript】テキストを1文字ずつアニメーションさせる方法

文字を一文字ずつ分割し、配列へ

  <div class="TextAni logo">GXY-Life</div>
  <div class="TextAni scroll">Scroll to Begin</div> 

要素内の文字を取得

  const animationTarget = document.querySelectorAll(".TextAni");
  for (let i = 0; i < animationTarget.length; i++) {
      const element = animationTarget[i];
      const texts = element.textContent;
  }

これで、変数textsに文字が格納されました。

文字を分割し、配列へ入れる

分割はsplit("")

配列への挿入はpush()

  textsArray = [];   // 配列を宣言
  element.textContent = "";   //最初に入力した文字を消す
  for (let j = 0; j < texts.split("").length; j++) {   //文字数分回す
    const textT = texts.split("")[j];  
    if (textT === " ") {    //文字が空白だった場合の処理
      textsArray.push(" ");   //配列に空白を入れる
    } else {    //空白ではなかった時の処理
      textsArray.push(
        '<span><span style="animation-delay: ' +
          (j * 0.1 + 0.5) +   //一文字ずつアニメーションを遅らせる
          's;">' +
          textT +
          "</span></span>"
      );
    }
  }

HTMLの生成

  for (let k = 0; k < textsArray.length; k++) {
        element.innerHTML += textsArray[k];   // "+="  により一文字ずつ足されていきます。
  }      

以下のように生成されました。

  <div class="TextAni logo">
      <span><span style="animation-delay: 0.5s;">G</span></span>
      <span><span style="animation-delay: 0.6s;">X</span></span>
      <span><span style="animation-delay: 0.7s;">Y</span></span>
      <span><span style="animation-delay: 0.8s;">-</span></span>
      <span><span style="animation-delay: 0.9s;">L</span></span>
      <span><span style="animation-delay: 1s;">i</span></span>
      <span><span style="animation-delay: 1.1s;">f</span></span>
      <span><span style="animation-delay: 1.2000000000000002s;">e</span></span>
  </div>
  <div class="TextAni scroll">
      <span><span style="animation-delay: 0.5s;">S</span></span>
      <span><span style="animation-delay: 0.6s;">c</span></span>
      <span><span style="animation-delay: 0.7s;">r</span></span>
      <span><span style="animation-delay: 0.8s;">o</span></span>
      <span><span style="animation-delay: 0.9s;">l</span></span>
      <span><span style="animation-delay: 1s;">l</span></span> 
      <span><span style="animation-delay: 1.2000000000000002s;">t</span></span>
      <span><span style="animation-delay: 1.3s;">o</span></span> 
      <span><span style="animation-delay: 1.5s;">B</span></span>
      <span><span style="animation-delay: 1.6s;">e</span></span>
      <span><span style="animation-delay: 1.7000000000000002s;">g</span></span>
      <span><span style="animation-delay: 1.8s;">i</span></span>
      <span><span style="animation-delay: 1.9000000000000001s;">n</span></span>
  </div>

CSSによりアニメーションさせる

  .TextAni span span {
    font-size: 2em;
    color: blue;
    text-shadow: 3px 3px 5px #fff;
    font-weight: bold;
  }
  @keyframes ShowTextFromBottom {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @keyframes ShowTextFromTop {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @keyframes slide {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0px);
    }
  }
  .logo > span > span {
    animation: slide 3s ease-in-out backwards;
  }
  .TextAni span {
    display: inline-block;
    overflow: hidden;
  }
  .scroll > span:nth-of-type(odd) > span {    //oddは奇数
    animation: ShowTextFromTop ease-out 2s backwards;
  }
  .scroll > span:nth-of-type(even) > span {   //evenは偶数
    animation: ShowTextFromBottom ease-out 2s backwards;
  }

transformの値を変えて、いろいろなアニメーションを試してみてください。

完成したコード

  const animationTarget = document.querySelectorAll(".TextAni");

  for (let i = 0; i < animationTarget.length; i++) {
    const element = animationTarget[i];
    const texts = element.textContent;
    textsArray = [];
    element.textContent = "";

    for (let j = 0; j < texts.split("").length; j++) {
      const textT = texts.split("")[j];
      if (textT === " ") {
        textsArray.push(" ");
      } else {
        textsArray.push(
          '<span><span style="animation-delay: ' +
            (j * 0.1 + 0.5) +
            's;">' +
            textT +
            "</span></span>"
        );
      }
    }

    for (let k = 0; k < textsArray.length; k++) {
      element.innerHTML += textsArray[k];
    }
  }