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

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

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

CSSだけでテキストをふわっとフェードインさせる方法です。
CSSanimationのキーフレームを使った方法をご紹介します。

CSSanimationは、要素を動的に変化（アニメーション）させるCSSです。
この記事ではCSSanimationのキーフレームの基本的な使い方について、テキストをフェードインさせる方法を元に書いています。

1.キーフレームアニメーションの基本

1-1．構成

CSSanimationは、animationプロパティと、@keyframesの２つの要素で成り立っています。

それぞれの役割は、animationプロパティで動きの設定をして、@keyframesで時間の経過とそこでの状態を指定します。

CSSanimationの構成

  1. animationプロパティ・・・動きの設定
  2. @keyframes・・・時間の経過とそこでの状態を指定

コードを記述すると、例えば下記のようになります。
下記CSS4行目～6行目がanimationプロパティ、8行目～21行目が@keyframesです。

animationプロパティと@keyframesは、CSS4行目animation-nameで指定した名前をCSS8行目@keyframesの後に記述することで関連付けられます。
詳しくは後述します。

.fade-in01{ 
  font-size:40px;
  opacity:0;
  animation-name: sample01; /*←@keyframesにも同じ名前を記述*/
  animation-duration: 8s; 
  animation-fill-mode: forwards; 
}
@keyframes sample01 {  /*←animation-nameにも同じ名前を記述*/
0% {
  opacity: 0;
  color:#000;
}
90% {
 opacity: 1;
 color:#000;
}
 100% {
  opacity: 1;
  color:#00f;
} 
}

1-2．CSSanimationのプロパティ

CSSanimationでは、以下の8つのプロパティでアニメーションの様々な設定を行うことができます。
プロパティの全てを一度に把握するのは大変なので、使う機会に応じて徐々に慣れていくといいと思います。

プロパティ名内容初期値
animation-name名前の設定none
animation-durationアニメーションしている時間の設定0
animation-timing-functionアニメーションの進行速度を設定ease
animation-delay遅延時間を設定0
animation-iteration-countアニメーションの実行回数の設定1
animation-directionアニメーションの向きを設定normal
animation-fill-modeアニメーション前後の状態を設定none
animation-play-stateアニメーションの再生・停止を設定running

各プロパティは、初期値以外にも複数指定できる値があります。
フェードインに必要なプロパティについては、後述します。

1-3. CSSanimationプロパティ

上記8つのプロパティに加えて、animationプロパティというものがあります。
これは、8つのプロパティを簡略化して一行で記述できるショートハンドプロパティです。

下記のようにプロパティの値だけを書きます。

animation: name 2s(1) ease 0s(2) infinite alternate forwards running;

上記コードのルビ(1)と(2)は時間を指定するプロパティです。
プロパティは任意の順序で記述できますが、時間を指定する下記プロパティは順番が決まっています。

1つ目がanimation-duration(アニメーションしている時間の設定)・・・ルビ(1)
2つ目がanimation-delay(遅延時間を設定)・・・ルビ(2)

1-4. animationプロパティの省略

animationプロパティは、8つありますが省略することもできます。
省略されたプロパティは初期値が適用されます。

時間を指定するプロパティを一つしか記述しなかった場合は、animation-durationプロパティとみなされます。

1-5．ベンダープレフィックスについて

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

各ブラウザの識別子

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

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

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

animationプロパティは現時点では識別子が必要ですが、この記事ではコードのポイントがわかりにくくなってしまうので、識別子を付けたコードは省略しています。

2．フェードインの実装

See the Pen MWWxQQG by natsuki (@natsukimemo) on CodePen.

上のsample01は、ロードされるとふわっと黒で文字が現れ始め完璧に表示された後、青色に変化する、といったアニメーションが2回繰り返されます。
※上のCODEPENのフレームの右下角の「Rerun」をクリックして再生してみてください。

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

<p class="fade-in01">Sample01</p>

htmlはpタグの一行のみです。

.fade-in01{ 
  font-size:40px;
  opacity:0;
  animation-name: sample01; 
  animation-duration: 5s; 
  animation-iteration-count:2;
  animation-fill-mode: forwards; 
}
@keyframes sample01 {
0% {
  opacity: 0;
  color:#000;
}
90% {
 opacity: 1;
 color:#000;
}
 100% {
  opacity: 1;
  color:#00f;
} 
}

では、CSSを順番に見ていきましょう。

まずはロードされた時から非表示にしておく

CSS3行目 opacity:0;

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

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

animation-nameと@keyframes

CSS4行目 animation-name: sample01;
CSS9行目 @keyframes sample01 {

animation-nameは名前を付けるプロパティです。「sample01」と名前を付けています。
ここで付けた名前を@keyframesの後ろに半角スペースを空けて記述することで互いが関連付けられるようになります。

animationに名前を付ける

animation-name: 〇〇〇;
@keyframes 〇〇〇｛ ｝

〇〇〇は、同じ名前であること

animation-duration

CSS5行目 animation-duration: 5s;

animation-durationは、アニメーションをしている時間を設定するプロパティです。
「5s」 のsは、second（秒）でアニメーションしている時間を5秒に設定しています。

プロパティ値単位
animation-duration数値（初期値0）s

animation-iteration-count

CSS6行目 animation-iteration-count:2;

animation-iteration-countは、アニメーションの回数を指定できるプロパティです。
sample01の場合、2回繰り返すよう指定しています。

プロパティ値意味
animation-iteration-count数値（初期値1）繰り返し回数
infinite無限に繰り返す

animation-fill-mode

CSS7行目 animation-fill-mode: forwards;

animation-fill-modeは、アニメーションの終了時の状態を指定できるプロパティです。
指定できる値と意味は下記になります。

値意味
noneアニメーションの前後は、CSSanimationが適用されません。
backwardsアニメーション再生後は、キーフレームの前の状態に戻る（つまりキーフレームの指定は適用されない）
forwardsアニメーションの再生後は、再生後（キーフレーム100%）の状態を維持。
bothアニメーションの再生後は、再生後（キーフレーム100%）の状態を維持。
animation-delayを指定している場合は、再生までの時間はキーフレームの指定は適用されない。

sample01は、「forwards」を指定しているので、アニメーション再生後は、キーフレーム100%の状態を維持して、青色のままになっています（CSS20行目）。

(補足)animationプロパティ

sample01をanimationプロパティ(ショートハンド)で記述すると下記のようになります。

animation: sample01 5s 2 forwards;

@keyframesの設定

CSS9行目からは@keyframesの設定になります。

@keyframesでは、時間の経過とそこでの状態を指定できます。
時間の経過はパーセントで細かく指定出来ますが、0%はfrom、100%はtoと書くことも出来ます。

@keyframesの書き方

@keyframes 名前 {
0% または from { 0%の時の状態を指定 }
100% または to { 100%の時の状態を指定 }
}

sample01は、下記の3つのポイントで時間の経過とそこでの状態を指定しています。

CSS10行目 0%{ 、14行目 90%{ 、18行目 100%{

CSS11行目～12行目 透明度を0（非表示）、色を黒に指定
CSS15行目～16行目 透明度を1（表示）、色を黒に指定
CSS19行目～20行目 透明度を1（表示）、色を青に指定

animationプロパティとの関連

上記の3つの変化はanimation-duration: 5s; と設定しているので5秒間で行われます。
次に、animation-iteration-count:2; と設定しているので、2回繰り返されます。
繰り返された後は、animation-fill-mode:forwards; を指定しているので、@keyframesの100%で指定したcolor:#00f;が適用されて青色のままになります。

スポンサーリンク

まとめ

この記事では、8つあるanimationプロパティのうち4つを使用しました。

この記事で使用したanimationプロパティ

  • animation-name
  • animation-duration
  • animation-iteration-count
  • animation-fill-mode

他のプロパティを追加して、例えばanimation-timing-functionでアニメーションの進行速度を指定してみたり、いろいろ遊べます。

少し応用編としてフェードインしながら上下や左右からスライドインする方法や、CSSで描いた円をアニメーションで中心から拡大表示する方法、スクロールでフェードイン表示させる方法についても記事にしました。
よろしければご覧ください。

サイト内関連リンク

CSSで上下から左右からフェードインしながらスライドイン！translate関数の使い方 –
NatsukiMemo

CSSで円を描いて中央に文字を入れる方法と、円の中心からアニメーションで拡大させる方法 –
NatsukiMemo

スクロールでフェードイン表示させる方法（jQuery+HTML+CSS）-
NatsukiMemo

この記事がお役に立てると幸いです。

【番外】WEB制作習得におすすめの本

スポンサーリンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

スポンサーリンク

スポンサーリンク
スポンサーリンク

当ブログ利用サーバー

スポンサーリンク
スポンサーリンク