JavaScript | animate()で震えるアニメーション

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

JavaScriptのanimate()メゾッドを使った要素や画像、テキストが小刻みに震えるのアニメーションの実装サンプルを紹介しています。

震えるアニメーション

animate()メゾッドを利用した要素が小刻みにプルプルと震えるアニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。

See the Pen JavaScript | Color change 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: 20px;
}

animate()メゾッドで「transform」プロパティの「translate()」を調節して要素が小刻みに震えるようにしています。

サンプルでは四角形の要素に対して指定していますが、そのまま画像やテキスト・文字に対しても利用できます。

document.querySelector(`.item`).animate(
	[
		{
			offset: 0.00,
			transform: 'translate(0, 0)'
		},
		{
			offset: 0.05,
			transform: 'translate(-5%, 0)'
		},
		{
			offset: 0.10,
			transform: 'translate(5%, 0)'
		},
		{
			offset: 0.15,
			transform: 'translate(-5%, 0)'
		},
		{
			offset: 0.20,
			transform: 'translate(5%, 0)'
		},
		{
			offset: 0.25,
			transform: 'translate(-5%, 0)'
		},
		{
			offset: 0.30,
			transform: 'translate(0, 0)'
		},
		{
			offset: 1.00,
			transform: 'translate(0, 0)'
		}
	],
	{
		duration: 1500,
		iterations: Infinity
	}
);

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

また「ofset」プロパティでタイムラインのタイミングを調節しています。