目的

画像や文字が徐々に出現したり消えたりする、フェードイン・フェードアウト機能をCSSとJavaScriptでなるべく簡単に実装します。

実装

index.html

<div class="img">
  <img id="ghorst" class="ghorst" src="obake.png">
</div>

<button id="hide-btn">いないいな〜い</button>
<button id="appear-btn">ばぁ！</button>

stylesheet.css

/* アニメーションの設定 */
.ghorst {
  transition: opacity 3s; /* opacity要素(不透明度)の変更を3秒間かけて行う */
}

script.js

// 各要素を取得
const ghorst = document.getElementById('ghorst');
const hideBtn = document.getElementById('hide-btn');
const appearBtn = document.getElementById('appear-btn');

// 画像を透明にする処理
const ghorstHide = () => {
  ghorst.style.opacity = 0; // 画像要素のopacityプロパティの値を0(透明)にする
};

// 画像を不透明にする処理
const ghorstAppear = () => {
  ghorst.style.opacity = 1; // 画像要素のopacityプロパティの値を1(不透明)にする
};

// 各ボタン要素がクリックされた時の処理を指定
hideBtn.addEventListener('click', ghorstHide);
appearBtn.addEventListener('click', ghorstAppear);

使用　プロパティ・メソッド

CSSプロパティ	意味	参考サイト
opacity	要素の不透明度を設定	MDN Web Docs
transition	要素のアニメーションを定義する	MDN Web Docs

JavaScriptプロパティ・メソッド	意味	参考サイト
getElementById()	HTMLのidから要素を取得する	MDN Web Docs
style	要素のスタイルを変更する	MDN Web Docs
addEventListener()	要素にイベントが起こったときに実行される処理を指定	MDN Web Docs

解説

CSSプロパティのopacityで不透明度が指定できるため、transitionでopacityの値が変更されたときの変化アニメーションを定義します。
JavaScriptでopacityの値を変更することで、transitionで定義されたアニメーションが実行されます。

opacity

要素の不透明度を指定します。

0〜1の間で指定し、
0: 透明
1: 不透明
になっています。例えば、opacity: 0.5;と指定すると、その要素は半透明になります。

transition

要素の値が変更された際の、アニメーションの動きを定義します。transitonは、以下のの4つのプロパティを一括で指定できます(半角区切り)。
複数指定する場合はカンマ,で区切ります。
値の変更方法は、JavaScriptのclassListやstyle、CSSの:hoverなど。

プロパティ	意味	参考サイト
transition-property	効果を適用するプロパティの指定 (propaty: プロパティ)	MDN Web Docs
transition-duration	アニメーションが完了するまでの時間を指定 (duration: 持続・継続・間隔）	MDN Web Docs
transition-timing-function	変化の速度とタイミングを指定 (timing function: タイミング機能・時間調整機能)	MDN Web Docs
transition-delay	アニメーションが始まるまでの時間を指定 (delay: 遅延・先延ばし)	MDN Web Docs

.class {
  transition: 対象プロパティ 完了までの時間 変化の速度 開始までの時間;
}

/* 複数指定 */
.class {
  transition:
    プロパティA 完了時間 変化速度 開始時間,
    プロパティB 完了時間 変化速度 開始時間,
    プロパティC 完了時間 変化速度 開始時間;
}

transition-property

変化させるCSSのプロパティを指定します。
フェードイン・フェードアウトでは、opacityを指定しています。
指定をallとすることで、全てのプロパティを同時に指定することもできます。

transition-duration

アニメーションが完了するまでの時間の指定ができます。
s: 秒
ms: ミリ秒
の二つで指定できます。
今回は3sとすることで、3秒でフェードイン・フェードアウトをしています。

transition-timing-function

アニメーションの変化の速度を指定できます。

値	意味
ease	滑らか(初期値)
linear	一定速度
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まり、ゆっくり終わる
cubic-bezier	3次ベジェ曲線を数値で指定(x1, x2, y1, y2)

ease

.car {
  transition: 4s ease; /* 4秒で滑らかに */
}

linear

.car {
  transition: 4s linear; /* 4秒間一定速度で */
}

ease-in

.car {
  transition: 4s ease-in; /* 4秒でゆっくり始まる */
}

ease-out

.car {
  transition: 4s ease-out; /* 4秒でゆっくり終わる */
}

ease-in-out

.car {
  transition: 4s ease-in-out; /* 4秒でゆっくり始まりゆっくり終わる */
}

cubic-bezier

.car {
  transition: 4s cubic-bezier(0, 0.76, 1, 0.23); /* 4秒で真ん中ゆっくり */
}

参考サイト: Cubic Bezier(ジェネレータ)

transition-delay

アニメーションの開始時間を指定できます。
s: 秒
ms: ミリ秒
の二つで指定できます。

.car {
  transition: 4s 3s; /* スタートを押してから3秒後に4秒間で移動 */
}

style

JavaScriptでCSSプロパティの値を取得・変更する際に使用します。

今回は、

const ghorst = document.getElementById('ghorst');

で、画像の要素を取得し、

ghorst.style.opacity = 0;

とすることで、　opacityの値を変更しています。
この変更にtransitionプロパティが反応し、アニメーションが実行されます。

注意点

簡単にフェードイン・フェードアウトを実装できるtransitionですが、比較的新しい技術のため、古いブラウザ(IE9など)では動作しません。
対応ブラウザはDOM Web Docs(transition)や、Can I use (transition?)などを参照してください。

プラス

さらに動きをつけてみました。

<!-- HTMLは変更ありません -->
<div class="img">
  <img id="ghorst" class="ghorst" src="obake.png">
</div>

<button id="hide-btn">いないいな〜い</button>
<button id="appear-btn">ばぁ！</button>

/* レイアウトが崩れないように画像の場所取り */
.img {
  width: 300px;
  height: 320px;
}

/* 画像に高さ・幅を指定 */
.ghorst {
  width: 300px;
  height: 320px;
  transition: all 3s; /* width, height, opacityをまとめて指定するため、プロパティを　all　に変更 */
}

/* フェードアウトするときの値 */
.hide {
  width: 0;
  height: 0;
  opacity: 0;
}

/* フェードインするときの値 */
.appear {
  width: 300px;
  height: 320px;
  opacity: 1;
}

const ghorst = document.getElementById('ghorst');
const hideBtn = document.getElementById('hide-btn');
const appear = document.getElementById('appear-btn');

// クラスを付け替えることで、まとめて値を変更
const ghorstHide = () => {
  ghorst.classList.remove('appear');
  ghorst.classList.add('hide');
};

const ghorstAppear = () => {
  ghorst.classList.remove('hide');
  ghorst.classList.add('appear');
};

hideBtn.addEventListener('click', ghorstHide);
appear.addEventListener('click', ghorstAppear);

classList

要素のクラスを操作することができるプロパティです。

remove()メソッドを使用することで、クラスを削除し、add()メソッドでクラスを追加しています。

MDN Web Docs

ご覧いただき、ありがとうございました。