円が広がるCSSアニメーションサンプル

2022-06-27CSS アニメーション サンプル集,CSS

CSSで円が拡大するアニメーションのサンプルを紹介しています。

円が広がるCSSアニメーション

円が広がるCSSアニメーションの動作サンプルとサンプルコードになります。

See the Pen CSS | flex-direction by yochans (@yochans) on CodePen.

HTMLにはコンテナ要素としてclass名「container」、円の部分にはclass名「item」として<div>タグを設置しています。

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

コンテナ要素には円の配置を座標の絶対値で指定するために「position: relative;」を指定しています。

はみ出す部分を表示しない為に「overflow: hidden;」を指定していますが、必須ではありません。

円とする要素には「position: absolute;」、コンテナ要素の縦横中央に配置しています。

また、「expansion-anim」というキー名でアニメーションを指定しています。

アニメーションでの拡大処理は「transform: scale();」を利用しています。

.container {
	position: relative;
	height: 250px;
	overflow: hidden;
}

.item {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 100px;
	background: #fa8072;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: expansion-anim 5s linear infinite;
}

/* animation */
@keyframes expansion-anim {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(10);
	}
}