JavaScript

最終更新日:
公開日:

レシピ

アニメーション

HTML要素の背景色をアニメーションで変化させる

HTML要素の背景色を変化させるアニメーションを実装する方法について解説します。

この記事のポイント

  • 背景色のアニメーションはKeyframeEffectオブジェクトbackgroundColorを指定する

HTML要素の背景色を変化させるアニメーション

HTML要素の背景色はCSSのときはbackground-colorプロパティbackgroundプロパティを使って設定しますが、JavaScriptのWeb Animations APIでもこれらのプロパティを使って背景色を指定したアニメーションを実装することができます。

Note

Web Aniamtion APIの基本的な使い方やKeyframeEffectオブジェクトで設定できる内容については「Web Animations APIを使う」をご覧ください。

以下の例はarticle要素に対してbackground-colorプロパティを適用するアニメーションを実装しています。
background-colorプロパティbackgroundプロパティに置き換えても同じことができます。

サンプルページはこちら

HTML コード例

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

CSS コード例

article {
	padding: 20px;
	width: 100%;
	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;
}

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,
 		[
			{
				backgroundColor: '#5face7',
				offset: 0,
				easing: 'ease'
			},
			{
				backgroundColor: '#ecee49',
				offset: 0.25,
				easing: 'ease'
			},
			{
				backgroundColor: '#70ee49',
				offset: 0.5,
				easing: 'ease'
			},
			{
				backgroundColor: '#49e0ee',
				offset: 0.75,
				easing: 'ease'
			},
			{
				backgroundColor: '#5face7',
				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();
	});
});

アニメーションは5つの状態を設定しています。

このアニメーションを実行すると、2秒間(2000ミリ秒)の間にarticle要素の背景色が青(#5face7)、黄色(#ecee49)、緑(#70ee49)、水色(#49e0ee)、そして最初の青(#5face7)へと変化していきます。

KeyframeEffectオブジェクトに指定するプロパティ名について、「background」や「opacity」のように単語が1つのときはそのまま指定することができます。
しかし、今回の「background-color」や「padding-top」のような2つ以上の単語がある場合は「backgroundColor」や「paddingTop」のように間の「」を取って2つ目以降の単語の頭文字を大文字にするキャメルケース (ローワーキャメルケース)形式で指定する必要があります。