この記事にはプロモーションが含まれています。

【コピペOK】テキストフェードアニメーション｜5種類【Web制作】

2025-08-22

ケケンタ

テキストフェードアニメーションを実装したい……

ケケンタ

文字が美しくフェードイン・フェードアウトする効果を作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
テキストフェードアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「テキストフェードアニメーションを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するテキストフェードアニメーション

フェードイン
フェードアウト
フェードアップ（下からフェードイン）
フェードダウン（上からフェードイン）
フェードスライド

ケケンタ

特にコンテンツ表示や段階的表示には、テキストフェードアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

テキストフェードアニメーションとは

テキストフェードアニメーションは、文字が滑らかに表示・非表示されることで、ユーザビリティと視覚的満足度を向上させるアニメーション効果です。スムーズな表示とUX向上を実現する効果的な手法です。

効果的な使用場面

適している場面

コンテンツの段階的表示
ローディング画面
エラーメッセージ
成功メッセージ
ナビゲーション
モーダル表示

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェードイン	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェードアウト	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェードアップ	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェードダウン	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェードスライド	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

フェードイン

文字が滑らかにフェードインするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードイン効果の特徴

基本的なフェード効果
視覚的インパクトが高い
注目を集める効果

② HTML

<div class="fade-container">
  <div class="fade-text" id="fade-in-text">
    <h2 class="fade-title">Welcome to Our Website</h2>
    <p class="fade-description">This is a beautiful fade-in animation that creates an engaging user experience.</p>
  </div>
  <button class="trigger-btn" id="fade-in-btn">フェードイン開始</button>
</div>

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }
  
  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

/* フェードイン状態 */
.fade-title.fade-in,
.fade-description.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-in {
  transition-delay: 0.3s;
}

④ JavaScript

class FadeInAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 200;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-in');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-in');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-in');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle = document.querySelector('.fade-title');
  const fadeDescription = document.querySelector('.fade-description');
  const triggerBtn = document.getElementById('fade-in-btn');
  
  const fadeInAnimation = new FadeInAnimation(
    [fadeTitle, fadeDescription],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // 自動開始
  setTimeout(() => {
    fadeInAnimation.start();
  }, 500);

  // トリガーボタン
  triggerBtn.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeInAnimation.reset();
    
    // ②2秒後にフェードインアニメーションが発火する
    setTimeout(() => {
      fadeInAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title,
.fade-description {
  transform: translateY(40px);
}

/* 異なるカラーテーマ */
.fade-container {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

/* より大きなフォント */
.fade-title {
  font-size: 3rem;
}

フェードアウト

文字が滑らかにフェードアウトするアニメーションです。

① デモ

See the Pen テキストフェードアウト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードアウト効果の特徴

滑らかな非表示効果
視覚的インパクト
注目を集める効果

② HTML

<div class="fade-container">
  <div class="fade-text" id="fade-out-text">
    <h2 class="fade-title fade-in">Goodbye Message</h2>
    <p class="fade-description fade-in">This text will fade out smoothly when you click the button.</p>
  </div>
  <button class="trigger-btn" id="fade-out-btn">フェードアウト開始</button>
</div>

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }
  
  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

/* フェードアウト状態 */
.fade-title.fade-out,
.fade-description.fade-out {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-out {
  transition-delay: 0.2s;
}

④ JavaScript

class FadeOutAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 600;
    this.stagger = options.stagger || 200;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-out');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-out');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-out');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle2 = document.querySelector('#fade-out-text .fade-title');
  const fadeDescription2 = document.querySelector('#fade-out-text .fade-description');
  const triggerBtn2 = document.getElementById('fade-out-btn');
  
  const fadeOutAnimation = new FadeOutAnimation(
    [fadeTitle2, fadeDescription2],
    {
      delay: 0,
      duration: 600,
      stagger: 200
    }
  );

  // トリガーボタン
  triggerBtn2.addEventListener('click', function() {
    // ①テキストがパッと表示される
    fadeOutAnimation.reset();
    
    // ②フェードアウトが実行される
    setTimeout(() => {
      fadeOutAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるフェードアウト方向 */
.fade-title.fade-out,
.fade-description.fade-out {
  transform: translateY(20px);
}

/* より速いフェードアウト */
.fade-title,
.fade-description {
  transition: all 0.4s ease;
}

/* スケール効果付き */
.fade-title.fade-out,
.fade-description.fade-out {
  transform: translateY(-20px) scale(0.95);
}

フェードアップ

文字が下から上にフェードインするアニメーションです。

① デモ

See the Pen フェードアップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードアップ効果の特徴

下から上への動的表示
視覚的インパクト大
注目を集める効果

② HTML

<div class="fade-container">
  <div class="fade-text" id="fade-up-text">
    <h2 class="fade-title">Rising Text Animation</h2>
    <p class="fade-description">This text rises from bottom to top with a beautiful fade effect.</p>
  </div>
  <button class="trigger-btn" id="fade-up-btn">フェードアップ開始</button>
</div>

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }

  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(80px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(60px);
  transition: none;
}

/* フェードアップ状態 */
.fade-title.fade-up,
.fade-description.fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-up {
  transition-delay: 0.3s;
}

④ JavaScript

class FadeUpAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-up');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-up');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-up');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle3 = document.querySelector('#fade-up-text .fade-title');
  const fadeDescription3 = document.querySelector('#fade-up-text .fade-description');
  const triggerBtn3 = document.getElementById('fade-up-btn');

  const fadeUpAnimation = new FadeUpAnimation(
    [fadeTitle3, fadeDescription3],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // トリガーボタン
  triggerBtn3.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeUpAnimation.reset();

    // ②2秒後にフェードアップアニメーションが発火する
    setTimeout(() => {
      fadeUpAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title {
  transform: translateY(100px);
}

/* 回転効果付き */
.fade-title.fade-up,
.fade-description.fade-up {
  transform: translateY(0) rotate(0deg);
}

.fade-title,
.fade-description {
  transform: translateY(50px) rotate(5deg);
}

フェードダウン

文字が上から下にフェードインするアニメーションです。

① デモ

See the Pen テキストフェードダウン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードダウン効果の特徴

上から下への動的表示
視覚的インパクト大
注目を集める効果

② HTML

<div class="fade-container">
  <div class="fade-text" id="fade-down-text">
    <h2 class="fade-title">Falling Text Animation</h2>
    <p class="fade-description">This text falls from top to bottom with a smooth fade effect.</p>
  </div>
  <button class="trigger-btn" id="fade-down-btn">フェードダウン開始</button>
</div>

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }

  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(-80px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-60px);
  transition: none;
}

/* フェードダウン状態 */
.fade-title.fade-down,
.fade-description.fade-down {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-down {
  transition-delay: 0.3s;
}

④ JavaScript

class FadeDownAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-down');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-down');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-down');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle4 = document.querySelector('#fade-down-text .fade-title');
  const fadeDescription4 = document.querySelector('#fade-down-text .fade-description');
  const triggerBtn4 = document.getElementById('fade-down-btn');

  const fadeDownAnimation = new FadeDownAnimation(
    [fadeTitle4, fadeDescription4],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // トリガーボタン
  triggerBtn4.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeDownAnimation.reset();

    // ②2秒後にフェードダウンアニメーションが発火する
    setTimeout(() => {
      fadeDownAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title {
  transform: translateY(-100px);
}

/* スケール効果付き */
.fade-title.fade-down,
.fade-description.fade-down {
  transform: translateY(0) scale(1);
}

.fade-title,
.fade-description {
  transform: translateY(-50px) scale(0.9);
}

フェードスライド

文字がスライドしながらフェードするアニメーションです。

① デモ

See the Pen テキストフェードスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードスライド効果の特徴

スライドとフェードの組み合わせ
視覚的インパクト大
注目を集める効果

② HTML

<div class="fade-container">
  <div class="fade-text" id="fade-slide-text">
    <h2 class="fade-title">Sliding Text Animation</h2>
    <p class="fade-description">This text slides in from the side with a beautiful fade effect.</p>
  </div>
  <button class="trigger-btn" id="fade-slide-btn">フェードスライド開始</button>
</div>

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }

  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-80px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-60px);
  transition: none;
}

/* フェードスライド状態 */
.fade-title.fade-slide,
.fade-description.fade-slide {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-slide {
  transition-delay: 0.3s;
}

/* 異なる方向のスライド */
.fade-title.slide-right {
  transform: translateX(50px);
}

.fade-description.slide-right {
  transform: translateX(60px);
}

④ JavaScript

class FadeSlideAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
    this.direction = options.direction || 'left';
  }

  start() {
    this.elements.forEach((element, index) => {
      // 方向に応じてクラスを追加
      if (this.direction === 'right') {
        element.classList.add('slide-right');
      }

      setTimeout(() => {
        element.classList.add('fade-slide');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-slide', 'slide-right');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-slide', 'slide-right');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle5 = document.querySelector('#fade-slide-text .fade-title');
  const fadeDescription5 = document.querySelector('#fade-slide-text .fade-description');
  const triggerBtn5 = document.getElementById('fade-slide-btn');

  const fadeSlideAnimation = new FadeSlideAnimation(
    [fadeTitle5, fadeDescription5],
    {
      delay: 0,
      duration: 800,
      stagger: 300,
      direction: 'left'
    }
  );

  // トリガーボタン
  triggerBtn5.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeSlideAnimation.reset();

    // ②2秒後にフェードスライドアニメーションが発火する
    setTimeout(() => {
      fadeSlideAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title {
  transform: translateX(-100px);
}

/* 回転効果付き */
.fade-title.fade-slide,
.fade-description.fade-slide {
  transform: translateX(0) rotate(0deg);
}

.fade-title,
.fade-description {
  transform: translateX(-50px) rotate(-5deg);
}