JavaScript | animate()でバウンドアニメーション

2022-03-09

animate()メゾットを使ってテキストや要素をバウンド(弾む)させるJavaScriptアニメーションの実装サンプルを紹介しています。

バウンドアニメーション

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

See the Pen JavaScript | drop 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()メゾットでテキストや要素が弾んでいるようにみせるのに「transform」プロパティで「translateY()」「scale()」の値に変化をつけています。

ターゲットの要素が「position」プロパティで「absolute」「fixed」他、絶対値での位置指定を可能にしている場合は「top」を調節した落下アニメーションも指定可能です。

document.querySelector(`#item`).animate(
	[
		{ transform: 'translateY(0) scale(1)' },
		{ transform: 'translateY(-50px)' },
		{ transform: 'scale(1)' },
		{ transform: 'scale(1.2, 0.9)' },
		{ transform: 'translateY(0) scale(1)' }
	],
	{
		duration: 1000,
		iterations: Infinity
	}
);

CSSアニメーションキーフレームでの%(パーセント)指定の代わりになっている「offset」プロパティを使う事でより細かくアニメーションのタイミングを指定する事も可能です。

関連:文字や要素が弾むバウンドアニメーションのCSSサンプル集 | ONE NOTES