記事内に広告が含まれています。

CSSで文章を一行ずつ時間差で順番にフェードインさせる方法

Feb 21, 2020

CSS,HTML,JS , コーディング

ページを開くと、テキストが一行ずつ上から下に向かって時間差で順々に、アニメーションでフェードイン表示する方法です。
先日、プロローグのようなページを作る機会があってその際に実装してみたので、その時のメモも兼ねて記事にしようと思います。

上から下へ一行ずつ表示させる

まず、完成形はデモをご覧ください。
※下のボタンをクリックするとデモページが開きます。

DEMO

6行のテキストを一行ずつ3秒間隔でフェードイン表示させています。
フェードインには、CSSのキーフレームアニメーションを用いています。
そして、animation-delayを使って時間差が出るように遅延時間を調整しています。

HTML

DEMOのコードは下記になります。

フェードインに必要なHTMLコードは　4行目から9行目のpタグのみです。
時間差で表示させる文章を一行ずつpタグで囲っています。

<body>
<div class="wrap">
<div class="content">
  <p class="fadein txt01">1行目：テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt02">2行目：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt03">3行目：テキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt04">4行目：テキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt05">5行目：テキストテキストテキスト</p>
  <p class="fadein txt06">6行目：by NatsukiMemo</p>
</div>
</div>	
</body>

HTMLでポイントとなるのは、各pタグに二つのクラスを付与しているところです。

一つ目のクラス.fadein ・・・pタグ全てに付与
二つ目のクラス.txt01～.txt06 ・・・連番で異なるクラスを付与

この二つのクラスは、CSSで下記の設定をしています。

.fadein・・・フェードインアニメーションに関する指定
.txt01～.txt06・・・順々に表示させるための時間差（遅延時間）の指定

CSS

CSSは下記です。26行目以降がフェードイン表示に必要なコードです。


* {
	margin: 0;
	padding: 0;
}
.wrap {	
	width:100vw;
	height:100vh;
	background-color:#03085C;
	
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.content {		
	width:auto;
	height: auto;
}
p {
	font-size: 18px;
	color: #fff;
	line-height: 3em;
}

/*以下フェードイン表示の指定*/
.fadein {
	opacity: 0;
	animation: fadein 6s ease forwards;
}
@keyframes fadein {
	100% {	opacity: 1;}
}

/*以下遅延の指定*/
.txt01 {animation-delay: 1s;}
.txt02 {animation-delay: 4s;}
.txt03 {animation-delay: 7s;}
.txt04 {animation-delay: 10s;}
.txt05 {animation-delay: 13s;}
.txt06 {animation-delay: 16s;}

クラス.fadeinにフェードインアニメーションを定義する

26行目～32行目でクラス.fadeinにフェードインのアニメーションを定義しています。
アニメーションには@keyframes（キーフレームアニメーション）を用いています。

キーフレームアニメーションは、「animationプロパティ」（28行目）と「@keyframes(キーフレーム)」（30～32行目）のふたつの要素で構成されています。

それではコードを順番に見ていきましょう。

27行目 opacity: 0;

opacityは、要素の透明度を指定するプロパティです。
0は透明。つまり非表示ということです。

これをアニメーションさせる要素に指定します。
指定する理由は、ページがロードされた時から要素を非表示にするためです。
これを指定しておかないと、ページが読み込まれてアニメーションが始まるまで、一時的に要素が表示されてしまいます。

28行目 animation: fadein 6s ease forwards;

CSSアニメーションのショートハンドプロパティです。
ショートハンドプロパティとは、プロパティを省略して値だけをまとめて書くことができる記述方法です。

下記の4つの値で構成されています。

animation: fadein(1) 6s(2) ease (3) forwards(4);

(1). fadein

animation-nameプロパティの値になります。
これはアニメーションに名前を付けています。
30行目の@keyframesに半角スペースを空けて同じ名前を記述することで互いが関連付けられます。

(2). 6s

animation-durationプロパティの値になります。
これはアニメーションしている時間を設定しています。
6秒に指定しています。

(3). ease

animation-timing-functionプロパティの値になります。
アニメーションの進行速度を設定しています。
アニメーションの動きの最初と最後をなめらかにしています。

(4). forwards

animation-fill-modeプロパティの値になります。
アニメーションの終了時の状態を指定しています。
「forwards」は、アニメーションの再生後は、キーフレーム100%の状態を維持せよ、という意味です。
キーフレーム100%の状態とは、この場合、CSS31行目「100% { opacity: 1;} 」(表示)の状態です。

30行目@keyframes fadein {

@keyframesに半角スペースを空けて「fadein」と記述することで28行目のanimationプロパティと関連付けられています。

31行目 100% { opacity: 1;}

キーフレームアニメーションの終了時の状態を指定しています。
27行目で非表示となっていた要素がアニメーションしながら、opacity: 1（表示）を指定することで完全に表示されます。

以上のCSSでフェードインアニメーションを実現しています。

クラス.txt01～.txt06に遅延時間の指定をする

animation-delayは、アニメーションの遅延時間を指定するCSSです。
各pタグに異なるクラス（.txt01～.txt06）を付与し、それぞれにanimation-delayを違う値で指定します。（CSS35行目以降）
こうすることで時間差で順々に表示されます。

例：animation-delay: 1s;

1sの「s」は、secondの略で秒数を表しています。
1秒遅れてアニメーションが実行するよう指定しています。

DEMOは、各pタグを3秒間隔で表示するように指定しています。

以上のCSSで一行ずつ順番にフェードインさせるアニメーションを実現しています。

コードのポイント

一つのpタグに二つのクラスを付与することで、フェードイン表示と遅延時間を同時に実現している

補足：ベンダープレフィックスについて

CSS3で採用される予定の機能が各ブラウザで先行実装されており、それらを動作させるには各ブラウザごとに識別子を付ける必要があります。
これをベンダープレフィックスといいます。

この記事で扱っているanimationプロパティは、現時点では下記ブラウザにおいて識別子が必要です。

各ブラウザの識別子

-moz- ・・・ Firefox
-webkit- ・・・ Google Chrome、Safari
-ms- ・・・ Internet Explorer

例）
-webkit-animation-duration: 2s;
-ms-animation-duration: 2s;
@-webkit-keyframes

いずれ、正式採用されてこのベンダープレフィックスは不要となり効かなくなりますので、必ず識別子のないCSSも併記しておきます。

この記事内ではコードのポイントがわかりにくくなってしまうので、識別子を付けたコードは省略しています。実際にコードを記述する際はご注意ください。

サイト内関連リンク

CSSのキーフレームアニメーションについては、基礎編も記事にしていますので、よろしければ下記もご覧ください。

CSSでふわっとフェードインさせる方法！@keyframesアニメーション入門-
NatsukiMemo

（番外）この記事のDEMOページをそのまま作ってみる

時間差のあるフェードインアニメーションの実装方法は前述のとおりですが、DEMOページをそのまま作ってみたい！という読者のために他のコードについてもご説明します。

DEMOは下記の条件で表示されています。

背景色が全画面表示(横幅800px以上の時)
要素を画面の縦横中央に配置
テキストを上から下へ一行ずつ表示（説明済み）
レスポンシブ対応(横幅800px以下の時)

表示条件1と2について下記のDEMOのコードを見ながらご説明していきます。

HTML

HTMLは、pタグ全部をdiv.contentで囲っています。
こうすることで、複数のpタグを内包するdiv.contentという一つの塊ができます。
そして、更にdiv.contentをdiv.wrapで囲います。

<body>
<div class="wrap">
<div class="content">
  <p class="fadein txt01">1行目：テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt02">2行目：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt03">3行目：テキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt04">4行目：テキストテキストテキストテキストテキストテキスト</p>
  <p class="fadein txt05">5行目：テキストテキストテキスト</p>
  <p class="fadein txt06">6行目：by NatsukiMemo</p>
</div>
</div>	
</body>

CSS

下記CSS1～4行目は、ブラウザの差異をなくすための記述です。この記事の主旨と反れるので説明は省略しますが、CSSの最初に記述することが多いです。
5行目～23行目で表示条件1と2を実現しています。


* {
	margin: 0;
	padding: 0;
}
.wrap {	
	width:100vw;
	height:100vh;
	background-color:#03085C;
	
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.content {		
	width:auto;
	height: auto;
}
p {
	font-size: 18px;
	color: #fff;
	line-height: 3em;
}
/*以下フェードイン表示の指定*/
/*前項で説明済みのため省略。*/

背景色を全画面表示する(横幅800px以上の時)

※全画面表示は横幅800px以上のパソコンで閲覧した場合を想定しています。

表示条件1の「背景色を全画面表示する」ためには、コンテンツ全体を囲っているdiv.wrapにwidth:100vw;、height:100vh;を指定します。（CSS6行目と7行目）

単位がvw（viewportWidth）とvh（viewportHeight）というところがポイントです。
この2行でbackground-colorが全画面表示になります。

サイト内関連リンク

画像のフルスクリーン表示の方法と、height:100%に関する記事も書いています。よろしければご覧ください。

画像を画面いっぱいに(フルスクリーン)！全画面表示するHTMLとCSS – NatsukiMemo

height:100%が効かない！CSSのheightの使い方について – NatsukiMemo

要素を画面の縦横中央に配置

表示条件2の「要素を画面の縦横中央に配置する」には、flexboxを使います。
縦横中央に配置するための手順は下記のようになります。

手順

div.contentにwidthとheightを指定
親要素div.wrapにflexboxを指定

1. div.contentにwidthとheightを指定

まず、pタグ全体をおおっているdiv.contentにwidthとheightをautoで指定します。（CSS16行目と17行目）

高さも横幅も内包するコンテンツの量に自動で合わせるようautoにしています。

2. 親要素div.wrapにflexboxを指定

div.contentの親要素にあたるdiv.wrapにflexboxを指定します。

CSS10行目 display:flex;を指定して、
CSS11行目 justify-content:center;で横位置を中央に。
CSS12行目 align-items:center;で縦位置を中央にしています。
CSS13行目 text-align:center;でテキストの行揃えを中央にします。

以上のCSSで要素を画面の縦横中央に配置することができます。

レスポンシブに対応させる

ウィンドウ幅800px以下は、レスポンシブに対応させます。

これまで説明してきたCSSは横置きPC用のCSSです。それとは別にレスポンシブ用のCSSを用意します。
このDEMOでは、下記二つのCSSを用意しています。

横置きパソコン用・・・・demo.css （説明済み）
レスポンシブ用・・・・mobile.css

それでは、レスポンシブに対応させるためのコードを詳しく見ていきましょう。

HTML

※この先は、説明する部分だけHTMLコードを抜粋しています。
コードの全体像を見たい場合は、DEMOページを開いた状態で「右クリック→ソースを表示する」でHTMLコード全部を表示することができます。

まず、headタグ内に下記の1行を追加します。
位置はmetaタグの最後あたりに追加します。

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

次に、headタグ内にレスポンシブ用のスタイルシートを読み込むためのコードを記述します。
PC用のCSSの次に読み込まれるように、下記のようにdemo.cssの後に記述します。
こうすることで、demo.cssがmobile.cssによって上書きされることになります。

<link rel="stylesheet" href="demo.css"  type="text/css">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 800px)">

ここで注目したいのは、上記HTML2行目の最後の方に記述してある
media=”screen and (max-width: 800px)”の部分です。

これを記述することでウィンドウ幅800px以下で閲覧した場合、mobile.cssが読み込まれるようになります。

CSS（mobile.css）

mobile.cssには、レスポンシブに必要なコードだけを記述します。

.wrap {
	height: auto;
}
.content {
	margin: 60px auto;
	width: 80%;
}
p {
	font-size: 16px;
	line-height: 1.5em;
	margin: 1em 0;
}

.wrapの指定

CSS2行目 height: auto;

.wrapは全体を内包しており、dmeo.cssで背景色を指定しています。
このheightは背景色の高さにあたります。
demo.cssでは、背景色を全画面表示させるため、height:100vh;を指定していました。
ですが、mobile.cssでは、全画面表示ではなく「auto」にして内包する.contentの長さにより可変するようにします。

これは、width:800px以下の様々な横幅に対応していくと、収まり切れないテキストが改行されることになり、その分、縦が長くなっていきます。
どのくらい縦が長くなるかはデバイス次第なので、背景色の高さをauto（自動）にして、.contentの長さに応じて、.wrapの高さを自動で算出されるようにしておきます。