JavaScript | animate()でフェードイン・フェードアウトアニメーション

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

JavaScriptのanimate()メゾットを使ったフェードイン・フェードアウトのアニメーションを実装するサンプルを紹介しています。

フェードインアニメーション

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

See the Pen JavaScript | Fade in with animate by yochans (@yochans) on CodePen.

HTMLにはフェードインさせたい要素としてdivタグで「#item」を設置しています。

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

「#item」には以下のCSSをデフォルトで指定しています。

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

animate()でのフェードインには、CSS同様に透過度を指定する「opacity」を使う事が可能です。

「opacity」は初期状態の「1」から開始して完全に透過状態となる「0」で完了するように設定します。

アニメーション時間は「duration」「3000」(ms)を指定、最後の状態で停止する為に「fill」「forwards」を指定しています。

document.querySelector(`#item`).animate(
	[
		{ opacity: 1 },
		{ opacity: 0 }
	],
	{
		duration: 3000,
		fill: 'forwards'
	}
);

繰り返し動作させたい場合は「iterations: Infinity」を、反復させたい場合は「direction: alternate」追記します。

関連:JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES

フェードアウトアニメーション

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

See the Pen JavaScript | Duplicate an element by yochans (@yochans) on CodePen.

HTMLにはフェードアウトさせたい要素としてdivタグで「#item」を設置しています。

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

フェードアウトさせる「#item」には以下のCSSを指定しています。

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

animate()メゾットでのフェードアウトには、透過度を指定する「opacity」を使う事が可能です。

「opacity」は透明の状態となる「0」から開始して「1」で完了するように設定します。

アニメーション時間は「duration」「3000」(ms)を指定、最後の状態で停止する為に「fill」「forwards」を指定しています。

document.querySelector(`#item`).animate(
  [
    { opacity: 0 },
    { opacity: 1 }
  ],
  {
		duration: 3000,
		fill: 'forwards'
	}
);

繰り返し動作させたい場合はオプションに「iterations: Infinity」を、反復させたい場合は「direction: alternate」追記します。

関連:JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES

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

Posted by Yousuke.U