javascriptのテキストアニメーションで、表示されるのが遅い

Question

カーテンが開くような感じのテキストアニメーションを作成中ですが、
最初に表示される時に何秒間かかかっているので、すぐに表示ができるようにしてみたいです。
作成中のコード

ご意見いただければ幸いです。

<div class="text">
  <h1 class="title">
    <span>TEXT ANIMATION</span>
  </h1>
  <p class="sentence">
    <span>サンプル</span>
  </p>
</div>

.title {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  color: #aa8f7b;
  font-family: 'Josefin Sans', sans-serif;
}

.title span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.title.-visible,
.title.-visible span {
  transform: translate(0, 0);
}

.sentence {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  font-family: "Yu Gothic Medium";
  font-size: 16px;
  text-align: center;
}

.sentence span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.sentence.-visible,
.sentence.-visible span {
  transform: translate(0, 0);
}

/****** Base style. ******/
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0;
}

const CLASSNAME = "-visible";
const TIMEOUT = 1500;
const DELAY = 100;
const $target1 = $(".title");
const $target2 = $(".sentence");

setInterval(() => {
  $target1.addClass(CLASSNAME);
  setTimeout(() => {
    $target2.addClass(CLASSNAME);
  }, DELAY);

  setTimeout(() => {
    $target1.removeClass(CLASSNAME);
    setTimeout(() => {
      $target2.removeClass(CLASSNAME);
    }, DELAY);
  }, TIMEOUT);
}, TIMEOUT * 2);

Answer 1

下記のように書くと、すぐに表示されます。

// 略（質問文のコードそのまま）

setInterval((function hoge() {
 // 略（質問文のコードそのまま）
 return hoge;
})(), TIMEOUT * 2);

• https://codepen.io/ak2ie/pen/JjbVBdq

時間がかかる原因

setIntervalは指定時間ごとに処理を実行します。
初回もこの時間が経過しないと、処理が実行されません。今回はTIMEOUT * 2ミリ秒（=3秒）経過しないと、アニメーションが表示されなくなってしまっていました。

上記は即時関数といって、関数を定義して実行できるため、setIntervalによる時間経過を待つ必要がありません。

Comments

[ochomo]

コメントが遅くなりました。
すぐに解決できました！ありがとうございます！！