要素をフェードアウトする
CSSのキーフレームアニメーションを利用して、要素をフェードアウトするコードを紹介します。
概要
こちらの記事では transition プロパティを利用してフェードイン、フェードアウトの実装をしましたが、この記事ではキーフレームアニメーションを利用してフェードアウトを実装する方法を紹介します。
キーフレームを利用したアニメーションの書式については
こちらの記事を参照して下さい。
実装方法
キーフレームの0%に透明度 1 を設定し、キーフレームの100%に透明度 0 を設定します。キーフレームのアニメーションを実行することで、徐々に透明度が上がるフェードアウトの表示ができます。
プログラム1 : div要素をフェードアウトさせる
コード
下記のCSS、HTMLファイルを作成します。
.FadeFrame {
border:1px solid #ff6a00;
margin: 1rem 1rem 1rem 1rem;
}
.FadeFrame.fadeout {
animation: fadein-keyframes 3s ease 0s 1 forwards;
}
@keyframes fadein-keyframes {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="FadeOutElem.css" />
<script type="text/javascript">
function LinkClick() {
var elemList = document.getElementsByClassName("FadeFrame");
for (i = 0; i < elemList.length; i++){
elemList[i].classList.add("fadeout");
}
}
</script>
</head>
<body>
フェードアウトのデモ
<div class="FadeFrame">
枠1
</div>
<div class="FadeFrame">
枠2
</div>
<div class="FadeFrame">
枠3
</div>
<a href="javascript:LinkClick();">フェードアウト</a>
</body>
</html>
解説
[フェードアウト]リンクをクリックすると下記のコードを実行します。
getElementsByClassName()メソッドを呼び出し、"FadeFrame" クラスの要素をすべて取得します。戻り値は配列で戻るため、forループでそれぞれの要素のclassListに "fadeout" サブクラスを追加します。サブクラスが追加されることでアニメーションの設定が有効になりアニメーションが開始されます。
function LinkClick() {
var elemList = document.getElementsByClassName("FadeFrame");
for (i = 0; i < elemList.length; i++){
elemList[i].classList.add("fadeout");
}
}
.FadeFrame.fadeout サブクラスにはanimationプロパティでアニメーションの設定が記述されています。
キーフレーム
fadein-keyframes を3秒間で変化するアニメーションを実行します。アニメーション開始直後からアニメーションを開始し、1回だけアニメーションをします。
.fade-out-img.fadeout {
animation: fadein-keyframes 3s ease 0s 1 forwards;
}
キーフレームでは透明度を不透明の"1" から完全に透明な "0" にアニメーションします。
@keyframes fadein-keyframes {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[フェードアウト]リンクをクリックします。オレンジ色のFadeFrameクラスの要素である、[枠1][枠2][枠3]が徐々に薄くなります。
完全に透明になり、表示がフェードアウト状態になります。
プログラム2 : imgオブジェクトをフェードアウトさせる
コード
下記のCSS,HTMLファイルを作成します.
.fade-out-img {
}
.fade-out-img.fadeout {
animation: fadein-keyframes 2s ease 0.2s 1 forwards;
}
@keyframes fadein-keyframes {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="FadeOut.css" />
<script type="text/javascript">
function LinkClick() {
var elem = document.getElementById("img01");
elem.classList.add("fadeout");
}
</script>
</head>
<body>
フェードアウトのデモ
<div><img id="img01" class="fade-out-img" src="picture.png" /></div>
<a href="javascript:LinkClick();">フェードアウト</a>
</body>
</html>
解説
[フェードアウト]リンクをクリックすると下記のコードを実行します。
getElementById() メソッドを呼び出し、idが"img01"の要素を取得します。
取得した要素のclassListに "fadeout" を追加します。この処理により、fadeout サブクラスが要素に追加され、アニメーションが開始されます。
function LinkClick() {
var elem = document.getElementById("img01");
elem.classList.add("fadeout");
}
.fade-out-img.fadeout サブクラスにはanimationプロパティでアニメーションの設定が記述されています。
キーフレーム
fadein-keyframes を2秒間で変化するアニメーションを実行します。アニメーション開始から 0.2秒後からアニメーションを開始し、1回だけアニメーションをします。
.fade-out-img.fadeout {
animation: fadein-keyframes 2s ease 0.2s 1 forwards;
}
キーフレームでは透明度を不透明の"1" から完全に透明な "0" にアニメーションします。
@keyframes fadein-keyframes {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
実行結果
HTMLをWebブラウザで表示します。下図のページが表示されます。
[フェードアウト]のリンクをクリックします。リンククリック後0.5秒後からフェードアウトが始まり徐々に画像の透明度が上がり、色が薄くなります。
2秒ほどで完全に画像がフェードアウトして見えなくなります。
フェードアウトの処理が実装できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
