JavaScript | animate()で色変えアニメーション

2022-03-082022-03-09JavaScript アニメーション サンプル集,JavaScript

JavaScripのanimate()メゾッドを使った色変え・色変化、カラーチェンジアニメーションの実装サンプルを紹介しています。

色変化アニメーション

animate()メゾッドを利用した色を変更するアニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。

See the Pen JavaScript | Scale animation with animate by yochans (@yochans) on CodePen.

HTMLにはアニメーションさせたい要素としてdivタグで「.item」を背景色、ボーダー色、文字色の各色変えアニメーション用に3つ配置しています。

<div class="container">
	<div class="item background"></div>
	<div class="item border"></div>
	<div class="item font">FONT COLOR</div>
</div>

アニメーションさせるHTML要素「#item」には以下のCSSを指定しています。

.item {
	width: 80px;
	height: 80px;
	background: #4169e1;
	margin: 20px;
	border: solid 6px #FFF;
	padding: 5px;
}

animate()メゾッドで背景色、ボーダー色、文字色を変更するアニメーションを実装する各サンプルコードです。

オプションには「iterations: Infinity」と「direction: 'alternate’」を指定して無限ループするようにしています。

背景色を変更するアニメーション

背景色は「background」もしくは「backgroundColor」で指定する事が可能です。

// background Color
document.querySelector(`.background`).animate(
	[
		{ backgroundColor: '#4169e1' },
		{ backgroundColor: '#66ccff' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

ボーダー色を変更するアニメーション

ボーダー色は「border」または「borderColor」を指定します。

// border color
document.querySelector(`.border`).animate(
	[
		{ borderColor: '#ff7f50' },
		{ borderColor: '#98fb98' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

文字色を変更するアニメーション

文字色はそのまま「color」での指定が可能となっています。

// font color
document.querySelector(`.font`).animate(
	[
		{ color: '#FFF' },
		{ color: '#000' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);