JavaScript | animate()で拡大・縮小アニメーション

JavaScript アニメーション サンプル集,JavaScript

JavaScriptのanimate()メゾットを使った使った要素や画像、テキストを拡大・縮小させる拡縮アニメーションの実装サンプルを紹介しています。

拡大・縮小アニメーション

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

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

HTMLにはアニメーションで拡大や縮小させたい要素としてdivタグで「.item」を設置しています。

<div class="item"></div>

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

.item {
	width: 80px;
	height: 80px;
	background: #4169e1;
	margin: 100px;
/* 	transform-origin: 0 0; */
}

scaleで拡大・縮小アニメーション

animate()メゾットで拡大・縮小アニメーションを実装するのにタイムラインに「transform」「scale」を指定しています。

// scale animation
document.querySelector(`.item`).animate(
	[
		{ transform: 'scale(1)' },
		{ transform: 'scale(3)' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

widthやheightで拡大・縮小アニメーション

こちらは「width」「height」を使った拡大・縮小アニメーションになります。

scaleとは違い、他のHTML要素と重ならず、他の要素の位置にも影響します。

document.querySelector(`.item`).animate(
	[
		{
			width: '80px',
			height: '80px'
		},
		{
			width: '320px',
			height: '320px'
		}
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

サンプルではアニメーションを無限ループさせるのにオプションにて「iterations: Infinity」「direction: 'alternate’」を指定しています。
関連:JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES