JavaScript | animate()で点滅アニメーション

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

animate()メゾッドを使った要素を点滅させるJavaScriptアニメーションの実装サンプルを紹介しています。

点滅アニメーション

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

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

HTMLには点滅アニメーションさせたい要素としてdivタグで「#item」を設置しています。

<div id="item"></div>

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

#item {
	width: 80px;
	height: 80px;
	background: #4169e1;
	margin: 20px;
}

animate()メゾッドで点滅アニメーションを作成するにはタイムラインに透過を指定する「opacity」で「0」と「1」を繰り返すように指定します。

無限ループにするために「iterations: Infinity」、反転アニメーションは「direction: 'alternate’」を指定ます。

点滅速度はアニメーション時間「duration」の値を変更するか、タイムラインを増減させて調節していきます。

document.querySelector(`#item`).animate(
	[
		{ opacity: 1 },
		{ opacity: 0 }
	],
	{
		duration: 200,
		easing: 'linear',
		iterations: Infinity,
		direction: 'alternate'
	}
);