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

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

2025-08-21

ケケンタ

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

ケケンタ

文字が滑らかにスライドする効果を作りたい……

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

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

テキストスライドアニメーションとは

テキストスライドアニメーションは、文字が滑らかにスライドすることで、動的な表現と視覚的インパクトを提供するアニメーション効果です。ナビゲーションやコンテンツ切り替えに適した効果的な手法です。

効果的な使用場面

適している場面

ナビゲーションメニュー
コンテンツ切り替え
カルーセル表示
モーダル表示
タブ切り替え
ページ遷移

避けるべき場面

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

実装方法の比較

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

スライドイン

文字が横方向からスライドインするアニメーションです。

① デモ

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

このスライドイン効果の特徴

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

② HTML

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

③ CSS

/* 共通スタイル */
.slide-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;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.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);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.3s;
}

/* スライドイン状態 */
.slide-title.slide-in,
.slide-description.slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* リセット状態（ボタンクリック時用） */
.slide-title.reset-state,
.slide-description.reset-state {
  transition: none;
}

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

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

④ JavaScript

class SlideInAnimation {
  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;
    this.direction = options.direction || 'left';
  }

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

  reset() {
    this.elements.forEach(element => {
      // 一時的にtransitionを無効化
      element.classList.add('reset-state');
      element.classList.remove('slide-in');

      // 強制的にリフローを発生させてリセット状態を適用
      element.offsetHeight;

      // transitionを再度有効化
      element.classList.remove('reset-state');
    });
  }

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

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle = document.querySelector('#slide-in-text .slide-title');
  const slideDescription = document.querySelector('#slide-in-text .slide-description');
  const triggerBtn = document.getElementById('slide-in-btn');

  const slideInAnimation = new SlideInAnimation(
    [slideTitle, slideDescription],
    {
      delay: 0,
      duration: 800,
      stagger: 300,
      direction: 'left'
    }
  );

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

  // トリガーボタン
  triggerBtn.addEventListener('click', function() {
    // アニメーションをリセット
    slideInAnimation.reset();

    // 少し待ってからアニメーションを開始
    setTimeout(() => {
      slideInAnimation.start();
    }, 50);
  });
});

⑤ カスタマイズ例

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

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

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

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

スライドアウト

文字が横方向にスライドアウトするアニメーションです。

① デモ

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

このスライドアウト効果の特徴

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

② HTML

<div class="slide-container">
  <div class="slide-text" id="slide-out-text">
    <h2 class="slide-title">Goodbye Message</h2>
    <p class="slide-description">This text will slide out smoothly when you click the button.</p>
  </div>
  <button class="trigger-btn" id="slide-out-btn">スライドアウト開始</button>
</div>

③ CSS

/* 共通スタイル */
.slide-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;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.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);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 1;
  transform: translateX(0);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 1;
  transform: translateX(0);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドアウト状態 */
.slide-title.slide-out,
.slide-description.slide-out {
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドアウト時のみアニメーション */
}

.slide-description.slide-out {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

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

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

④ JavaScript

class SlideOutAnimation {
  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 || 'right';
  }

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

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

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

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle2 = document.querySelector('#slide-out-text .slide-title');
  const slideDescription2 = document.querySelector('#slide-out-text .slide-description');
  const triggerBtn2 = document.getElementById('slide-out-btn');

  const slideOutAnimation = new SlideOutAnimation(
    [slideTitle2, slideDescription2],
    {
      delay: 0,
      duration: 600,
      stagger: 200,
      direction: 'right'
    }
  );

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

  // トリガーボタン
  triggerBtn2.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideOutAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドアウト開始
    setTimeout(() => {
      slideOutAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

/* 異なるスライドアウト方向 */
.slide-title.slide-out,
.slide-description.slide-out {
  transform: translateX(-100px);
}

/* より速いスライドアウト */
.slide-title,
.slide-description {
  transition: all 0.4s ease;
}

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

スライドアップ

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

① デモ

See the Pen テキストスライドアップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドアップ効果の特徴

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

② HTML

<div class="slide-container">
  <div class="slide-text" id="slide-up-text">
    <h2 class="slide-title">Rising Text Animation</h2>
    <p class="slide-description">This text slides up from bottom to top with a beautiful effect.</p>
  </div>
  <button class="trigger-btn" id="slide-up-btn">スライドアップ開始</button>
</div>

③ CSS

/* 共通スタイル */
.slide-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;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.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);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(80px);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(60px);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドアップ状態 */
.slide-title.slide-up,
.slide-description.slide-up {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドアップ時のみアニメーション */
}

.slide-description.slide-up {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

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

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

④ JavaScript

class SlideUpAnimation {
  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('slide-up');
      }, this.delay + (index * this.stagger));
    });
  }

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

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

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle3 = document.querySelector('#slide-up-text .slide-title');
  const slideDescription3 = document.querySelector('#slide-up-text .slide-description');
  const triggerBtn3 = document.getElementById('slide-up-btn');

  const slideUpAnimation = new SlideUpAnimation(
    [slideTitle3, slideDescription3],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

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

  // トリガーボタン
  triggerBtn3.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideUpAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドアップ開始
    setTimeout(() => {
      slideUpAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

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

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

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

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

スライドダウン

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

① デモ

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

このスライドダウン効果の特徴

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

② HTML

<div class="slide-container">
  <div class="slide-text" id="slide-down-text">
    <h2 class="slide-title">Falling Text Animation</h2>
    <p class="slide-description">This text slides down from top to bottom with a smooth effect.</p>
  </div>
  <button class="trigger-btn" id="slide-down-btn">スライドダウン開始</button>
</div>

③ CSS

/* 共通スタイル */
.slide-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;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.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);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(-80px);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-60px);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドダウン状態 */
.slide-title.slide-down,
.slide-description.slide-down {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドダウン時のみアニメーション */
}

.slide-description.slide-down {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

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

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

④ JavaScript

class SlideDownAnimation {
  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('slide-down');
      }, this.delay + (index * this.stagger));
    });
  }

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

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

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle4 = document.querySelector('#slide-down-text .slide-title');
  const slideDescription4 = document.querySelector('#slide-down-text .slide-description');
  const triggerBtn4 = document.getElementById('slide-down-btn');

  const slideDownAnimation = new SlideDownAnimation(
    [slideTitle4, slideDescription4],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

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

  // トリガーボタン
  triggerBtn4.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideDownAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドダウン開始
    setTimeout(() => {
      slideDownAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

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

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

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

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

スライドリバース

文字が逆方向にスライドするアニメーションです。

① デモ

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

このスライドリバース効果の特徴

逆方向の動的表示
視覚的インパクト大
注目を集める効果

② HTML

<div class="slide-container">
  <div class="slide-text" id="slide-reverse-text">
    <h2 class="slide-title">Reverse Slide Animation</h2>
    <p class="slide-description">This text slides in reverse direction with a unique effect.</p>
  </div>
  <button class="trigger-btn" id="slide-reverse-btn">スライドリバース開始</button>
</div>

③ CSS

/* 共通スタイル */
.slide-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;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.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);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(120px);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(100px);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドリバース状態 */
.slide-title.slide-reverse,
.slide-description.slide-reverse {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドリバース時のみアニメーション */
}

.slide-description.slide-reverse {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

/* 異なる方向のリバース */
.slide-title.reverse-up {
  transform: translateY(50px);
}

.slide-description.reverse-up {
  transform: translateY(40px);
}

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

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

④ JavaScript

class SlideReverseAnimation {
  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 || 'right';
  }

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

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

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

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

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle5 = document.querySelector('#slide-reverse-text .slide-title');
  const slideDescription5 = document.querySelector('#slide-reverse-text .slide-description');
  const triggerBtn5 = document.getElementById('slide-reverse-btn');

  const slideReverseAnimation = new SlideReverseAnimation(
    [slideTitle5, slideDescription5],
    {
      delay: 0,
      duration: 800,
      stagger: 300,
      direction: 'right'
    }
  );

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

  // トリガーボタン
  triggerBtn5.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideReverseAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドリバース開始
    setTimeout(() => {
      slideReverseAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

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

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

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

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