CSSでテキストをワイプ表示（スライドアニメーション）する

以下のGIF画像のように、テキストをワイプ表示する方法です。

ソース

HTML

<div class="box">
  <div class="text">
    サンプル文章です。サンプル文章です。
  </div>
</div>

CSS（SCSS）

.box {
  width: 300px;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 3s;
  
  .text {
    transform: translateX(100%);
    transition: transform 3s;
  }
  
  &.visible {
    transform: translateX(0);
    .text {
      transform: translateX(0);
    }
  }
}

使用方法

テキストを表示したいタイミングで、<div class="box">にvisibleクラスを追加します（つまり、<div class="box visible">に変更）。

これにより、自動的にテキストがワイプ表示されます。

CSSの解説

ポイントは、CSSのtransformです。

まず初期状態（テキスト非表示状態）ですが、
.boxは、transform: translateX(-100%);（4行目）により、左に300px移動します。
.textは、transform: translateX(100%);（8行目）により、右に300px移動しますが、この時、親要素である.boxを基準に移動するので、-300px + 300px となり、結果的に移動しないことになります。移動はしないのですが、.textは.boxの領域外にハミ出ているため、表示されません（.boxのoverflow: hidden;）。

visibleクラスが付加されると、.boxと.textはtransform: translateX(0);により、移動していない状態へと戻ろうとします。この時、transition: transform 3s;が効くため、3秒間かけて移動するのですが、.textに関しては、.boxと同じ速度で逆向きに移動することになるので、こちらも結果的に移動しないことになります。つまり、.boxだけが移動してくるように見え、それがワイプ表示に見えるというロジックです。ややこしいですね🤔

今回はシンプルにするためにtransitionを使いましたが、animationを使うことで、より細かな設定が可能になります。

デモ（CodePen）

「テキストを表示」ボタンを押すと、テキストがワイプ表示されます。