HTML要素に透過エフィクトをつける

HTML要素を透過するアニメーション

HTML要素を透過するときはCSSのopacityプロパティやbackgroundプロパティを使って行いますが、JavaScriptのWeb Animations APIでもこれらのプロパティを使って透過アニメーションを設定することができます。

HTML要素を子孫要素も含めて透過させたいときはopacityプロパティ、子孫要素は透過させずに親要素だけ透過させるときはbackgroundプロパティを使います。

opacityプロパティを使った透過アニメーションのサンプルページはこちら

backgroundプロパティを使った透過アニメーションのサンプルページはこちら

以降はそれぞれのプロパティを使ったアニメーションをWeb Animations APIで実装していきますが、HTMLとCSSは以下の共通のコードを使います。
今回の例ではarticle要素に対して透過エフィクトを適用します。

HTML コード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<a id="btn_start" class="btn" href="#">アニメーション開始</a>
</article>

CSS コード例

article {
	padding: 20px;
	width: 100%;
	height: 150px;
	box-sizing: border-box;
	background-color: #5face7;
}

h1 {
	margin: 0 0 20px;
	padding: 0;
	font-size: 100%;
}

a.btn {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	background-color: #4a93cb;
}

opacityプロパティを使った透過アニメーション

opacityプロパティは適用した要素に加えて子孫要素も透過します。

サンプルページはこちら

以下の例はopacityプロパティを使った透過アニメーションです。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) HTML要素を取得
	const btn_start = document.getElementById('btn_start');
	const content1 = document.getElementById('content1');

	// (2) KeyframeEffectオブジェクトのインスタンス作成
	let keyframeeffect = new KeyframeEffect(
		content1,
		[
			{
				opacity: 1,
				offset: 0,
				easing: 'ease'
			},
			{
				opacity: 0.2,
				offset: 0.3
			},
			{
				opacity: 0.2,
				offset: 0.7,
				easing: 'ease'
			},
			{
				opacity: 1,
				offset: 1
			}
		],
		{
			duration: 2000,
			direction: 'alternate',
			iterations: 2
		}
	);

	// (3) Animationオブジェクトのインスタンス作成
	let animation = new Animation(keyframeeffect);

	// (4) ボタンが押されたらアニメーション再生
	btn_start.addEventListener('click', function(e){
		e.preventDefault();
		animation.play();
	});
});

Web Aniamtion APIの設定をページ読み込み完了のタイミングで実行するため、コード全体をイベントリスナー「DOMContentLoaded」の中で実行します。

「(1) HTML要素を取得」では、「アニメーション開始」ボタンとarticle要素をそれぞれid属性から取得します。
ボタンは変数btn_startに、article要素は変数content1に入れておきます。

続いて「(2) KeyframeEffectオブジェクトのインスタンス作成」では、KeyframeEffectオブジェクトのコンストラクタにアニメーションの効果（エフィクト）や再生設定を指定してインスタンスを作成します。
KeyframeEffectオブジェクトのコンストラクタは次の3つのパラメータを指定することができます。

let keyframeeffect = new KeyframeEffect( element, keyframeSet, keyframeOptions);

1つ目のelementはアニメーションの対象になるHTML要素を指定します。
ここには、先ほどarticle要素を取得して入れた変数content1を指定します。

2つ目のkeyframeSetはアニメーションの効果（エフィクト）の指定です。
ここは、上記のコードのうち以下の部分が該当します。

[
	{
		opacity: 1,
		offset: 0,
		easing: 'ease'
	},
	{
		opacity: 0.2,
		offset: 0.3
	},
	{
		opacity: 0.2,
		offset: 0.7,
		easing: 'ease'
	},
	{
		opacity: 1,
		offset: 1
	}
]

配列の中に、4つのオブジェクトが入った形になっています。
これはアニメーションの状態を表しており、opacityの値だけに注目するとアニメーション開始時は1から始まって、状態2の0.2、状態3の0.2、そして最終地点の1へと順に変化していく指定になります。

opacity以外にもoffsetとeasingを指定しています。

opacityはアニメーションの再生時間全体を100%としたときの状態の再生位置を指定することができます。
0は開始時点、0.3は30%、0.7は70%、1は100%で最終地点になります。
次の再生位置に向かいながら、今の状態から次の状態になるようにアニメーションは進んでいきます。

もう1つのeasingは次の状態に向かうときのアニメーションの効果（エフィクト）を指定します。
初期値は「linear」で平坦なアニメーションですが、「ease」と指定すると「最初はゆっくり、だんだん速く」のようなアニメーションにすることができます。
その他にも「ease-in」、「eaes-out」、「cubic-bezier」を使うことができます。

上記の状態では状態2と状態3はopacityの値が同じです。
このように指定すると、一定時間opacityを0.7の状態で維持するようなことができます。

3つ目のkeyframeOptionsはアニメーションの再生設定です。
上記のコードのうち、以下の部分が該当します。

{
	duration: 2000,
	direction: 'alternate',
	iterations: 2
}

durationは全体の再生時間、directionは再生する向き、iterationsは繰り返す回数を指定しています。
ここで指定できる値について詳しくは、「Web Animations APIを使う」の「KeyframeEffectオブジェクトのアニメーション再生設定」をご覧ください。

「(3) Animationオブジェクトのインスタンス作成」では、Animationオブジェクトのコンストラクタに先ほど作成したKeyframeEffectオブジェクトのインスタンスを渡してインスタンスを作成します。

最後に、「(4) ボタンが押されたらアニメーション再生」で「アニメーション開始」ボタンが押されたらアニメーションが再生されるように設定します。
イベントリスナーでイベント「click」を登録して、押されたタイミングでAniamtionオブジェクトのplayメソッドを実行します。

以上がopcityプロパティを使った透過アニメーションの基本的な実装になります。
上記のコードをブラウザで実行すると、article要素が子孫要素ごと透過するアニメーションが実行されます。

backgroundプロパティを使った透過アニメーション

backgroundプロパティは適用した要素のみ透過します。

以下の例はbackgroundプロパティを使った透過アニメーションですが、コードは先述の「opacityプロパティを使った透過アニメーション」とほぼ同じです。
違いはアニメーションの効果（エフィクト）の指定部分でopcityプロパティをbackgroundプロパティに置き換えていることです。

サンプルページはこちら

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) HTML要素を取得
	const btn_start = document.getElementById('btn_start');
	const content1 = document.getElementById('content1');

	// (2) KeyframeEffectオブジェクトのインスタンス作成
	let keyframeeffect = new KeyframeEffect(
		content1,
		[
			{
				background: 'rgba( 95, 172, 231, 1.0)',
				offset: 0,
				easing: 'ease'
			},
			{
				background: 'rgba( 95, 172, 231, 0.2)',
				offset: 0.3
			},
			{
				background: 'rgba( 95, 172, 231, 0.2)',
				offset: 0.7,
				easing: 'ease'
			},
			{
				background: 'rgba( 95, 172, 231, 1.0)',
				offset: 1
			}
		],
		{
			duration: 2000,
			direction: 'alternate',
			iterations: 2
		}
	);

	// (3) Animationオブジェクトのインスタンス作成
	let animation = new Animation(keyframeeffect);

	// (4) ボタンが押されたらアニメーション再生
	btn_start.addEventListener('click', function(e){
		e.preventDefault();
		animation.play();
	});
});

コードの解説についても先述した内容と重なるため省略します。
こちらのコードを実行してみると、article要素のみが透過して他の要素は透過しないアニメーションが再生されます。