【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

  <span class="leftAnime">
    <span class="leftAnimeInner">
      左から右テキストエフェクト
    </span>
  </span>

  /*左から右テキストエフェクト*/
  .leftAnime {
    opacity: 0;
    overflow: hidden;
    display: inline-block;
  }

  .leftAnimeInner {
    display: inline-block;
  }

//次章で追加するクラス
  .slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  @keyframes slideTextX100 {
    from {
      transform: translateX(-100%);
      /*要素を左の枠外に移動*/
      opacity: 0;
    }

    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }

//次章で追加するクラス
  .slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }


  @keyframes slideTextX-100 {
    from {
      transform: translateX(100%);
      /*要素を右の枠外に移動*/
      opacity: 0;
    }

    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }

function slideAnime() {
  //テキストが左から右に流れるアニメーション
  $('.leftAnime').each(function () {
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
   //要素がスクロール位置まできたら   
    if (scroll >= elemPos - windowHeight) {
      //クラス付与
      $(this).addClass("slideAnimeLeftRight");
      $(this).children(".leftAnimeInner").addClass("slideAnimeRightLeft"); 
    } else {
      //クラス削除
      $(this).removeClass("slideAnimeLeftRight");
      $(this).children(".leftAnimeInner").removeClass("slideAnimeRightLeft");

    }
  });

}

//スクロールしたらアニメーションさせる
$(window).scroll(function () {
  slideAnime();
});
// ページが読み込まれたらアニメーションさせる
$(window).on('load', function () {
  slideAnime();
});