JavaScript | animate()で回転アニメーション

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

animate()メゾッドを使った要素を回転させるJavaScriptアニメーションの実装サンプルになります。

横回転、横軸回転、縦軸回転の3パターンを紹介しています。

回転アニメーション

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

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

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

rotate()、rotateX()、rotateY()のそれぞれの回転アニメーション用のclass名も指定。

<div class="container">
	<div class="item rotate"></div>
	<div class="item rotateX"></div>
	<div class="item rotateY"></div>
</div>

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

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

サンプルではanimate()メゾッドで要素を回転させるのに「transform」プロパティにて、それぞれrotate()、rotateX()、rotateY()を利用しています。

rotate()

アニメーションタイムラインにて「transform」プロパティのrotate()で「0deg」から「360deg」の一回転するように指定、オプションにて「iterations: Infinity」で無限ループを設定しています。

// rotate()
document.querySelector(`.rotate`).animate(
	[
		{ transform: 'rotate(0deg)' },
		{ transform: 'rotate(360deg)' }
	],
	{
		duration: 1000,
		easing: 'linear',
		iterations: Infinity
	}
);

rotateX()

アニメーションタイムラインにて「transform」プロパティのrotateX()で「0deg」から「360deg」の一回転するように指定、オプションにて「iterations: Infinity」で無限ループを設定しています。

// rotateX()
document.querySelector(`.rotateX`).animate(
	[
		{ transform: 'rotateX(0deg)' },
		{ transform: 'rotateX(360deg)' }
	],
	{
		duration: 1000,
		easing: 'linear',
		iterations: Infinity
	}
);

rotateY()

アニメーションタイムラインにて「transform」プロパティのrotateY()で「0deg」から「360deg」の一回転するように指定、オプションにて「iterations: Infinity」で無限ループを設定しています。

// rotateY()
document.querySelector(`.rotateY`).animate(
	[
		{ transform: 'rotateY(0deg)' },
		{ transform: 'rotateY(360deg)' }
	],
	{
		duration: 1000,
		easing: 'linear',
		iterations: Infinity
	}
);