【CSS】テキストなどの要素をスライド表示するアニメーション

本記事では、以下のように指定したテキストなどをゆっくり／徐々に表示するアニメーション（スライドイン）の実装方法を紹介します。
（ボタンをクリックすると、実装したアニメーションが開始されます。）

HTML / CSS コード

ページを表示（更新）したときに、上記のアニメーションが実行されるコードです。
本実装例のように「ボタンを押したときにアニメーションを実行させる」場合はJavaScriptが必要です。

<div class="reveal-text">テキストが左から右へ、ゆっくり／徐々に表示されます。</div>

.reveal-text {
  animation: revealText 2s ease-out forwards;
  display: inline-block;
  color: white;
  font-weight: bold;
  background-color: orange;
}

@keyframes revealText {
  from {  
    clip-path: inset(0 100% 0 0);
  }  
  to {
    clip-path: inset(0 0 0 0);
  }  
}

【実装のポイント】アニメーション(animation) と キーフレーム(@keyframes)プロパティ

CSSのanimationと@keyframesプロパティを用いることで、ページを表示したときなどのタイミングで簡単にアニメーションを設定することができます。

アニメーションプロパティ(animation)

animationプロパティは、アニメーションの持続時間、タイミング関数、遅延時間、反復回数などを設定するために使用されます。
このプロパティはショートハンドであり、複数のアニメーションプロパティを一度に指定できます。

animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];

今回の実装例では、以下のように[name] [duration] [timing-function] [fill-mode]の4つを指定したアニメーションを、表示するテキスト要素にセットしています。

.reveal-text {
  animation: revealText 2s ease-out forwards;
  /*
    revealText: @keyframesを使って定義されたアニメーション名。
    2s: アニメーションを2秒かけて実施。
    ease-out: アニメーション開始時には速く、終了に向けて徐々に遅くなる。
    forwards: アニメーションが終了した後も、要素は最終状態（本実装例の場合はテキストが全て表示された状態）に留まる。
  */
}

キーフレームプロパティ（@keyframes）

@keyframesを使用すると、さまざまなステップでアニメーションのスタイルを指定できるようになります。

@keyframes animation-name {
  0% { /* 開始スタイル */ }
  100% { /* 終了スタイル */ }
}

アニメーションとキーフレームの使用例

@keyframes double {
  from { transform: scale(1); }
  to { transform: scale(2); }
}

.bigger {
  animation: double 1s ease-in-out forwards;
}

この例では、biggerクラスを持つ要素をホバーしたときに、その要素が1秒かけて元のサイズから2倍に大きくなります。ease-in-outはアニメーションの開始と終了がゆっくりになるタイミング関数で、forwardsはアニメーション終了後も最終状態（2倍に大きくなった状態）を保持します。

あわせて読みたい

【JS&CSS】クリック（タップ）で画像を拡大させる transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…

【実装のポイント】clip-pathプロパティ

clip-pathプロパティを使うことで、要素の表示領域を指定した形状にクリップ（切り抜き）できます。
これと前項のanimationと@keyframesを併用することで、要素の左側から徐々に全体を表示するアニメーションを作成できます。

inset()関数について

clip-path: inset(); を使うと、要素の表示領域を内側に向かって切り取ることができます。
引数に、上・右・下・左の辺からの切り取る量を指定することで、要素の一部を非表示にし、残りの部分を表示します。

clip-path: inset(<top> <right> <bottom> <left> [round <border-radius>]);

top>, <right>, <bottom>, <left>

要素の各辺から切り取る量を指定。単位はピクセル(px)やパーセンテージ(%)など。

[round <border-radius>]:

切り取りの角を丸めるために使用。border-radius と同様の値を指定できます。

今回の実装例では、以下のように@keyframesと合わせて実装することで、左から右へと「スライドイン」するようなテキストやコンテンツが表示されるアニメーションを作成しています。

@keyframes revealText {
  /* アニメーションの開始時点 */
  from {  
    /* 要素の左から右への表示領域を0%にし、要素が完全に隠れるように設定。*/
    clip-path: inset(0 100% 0 0); /* 上, 右, 下, 左 */
  }
  /* アニメーションの終了時点 */
  to {
    /* 要素が全て表示されるように設定。
       要素が左から右へと表示されるようなアニメーションになる。 */
    clip-path: inset(0 0 0 0); /* 上, 右, 下, 左 */
  }
}

その他の目を惹くアニメーション

当サイトでは、関連するアニメーションとして以下のような実装方法も紹介しています。

あわせて読みたい

【CSS】文字や画像をホバーしたときにズームイン＆暗くする マウスを置いた（ホバーした）とき、文字や画像などの要素を拡大（要素サイズからはみ出た部分は非表示）したり暗くしたりする実装方法を紹介します。自分の学習・メモ…

あわせて読みたい

【JS&CSS】クリック（タップ）で画像を拡大させる transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…

あわせて読みたい

【JS&CSS】画像をクリックしたら拡大表示する方法（モーダルウィンドウ） 画像をクリック または タップすると、画面中央に原寸大の画像をフワッと表示する方法を紹介します。（右のレインボーの画像をクリック または タップしてみてください…

あわせて読みたい

【CSS】画面奥から文字や画像を拡大 / 回転させる（3Dアニメーション） この記事では、マウスをホバーしたときにテキストや図形を立体的に変化させるアニメーション（3Dアニメーション）の実装方法について紹介しています。自分の学習・メモ…

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

あわせて読みたい

Webデザイン・UIコンポーネント集（HTML/CSS/JS） Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開していますので、自…