cssのscaleを使ってアニメーションしながら図形の形を変える方法

cssのscaleを使うことでサイズを変えたり形を変更することができます。

一度アニメーションを作ってしまえばあと数値を変えたりすればいろいろなアニメーションが作れると思います。

ぜひ試してみてください。

caleを使ってアニメーションする方法

html

<span class="shape-anime shape-anime-change"></span>

css

.shape-anime {
	position: absolute;
	opacity: 0;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: #000;
	animation: fadeShapeAnime linear 1s 0.5s forwards;
}

.shape-anime.shape-anime-change {top: 0;}

@keyframes fadeShapeAnime {
  0% {
	opacity: 0;
	transform: scale(1, .5);
  }
  30% {
	opacity: .3;
	transform: scale(.8, 1.1);
  }
  80% {
	opacity: 0.8;
	transform: scale(1, .5);
  }
  100% {
	opacity: 1;
	transform: scale(1, 1);
  }
}

サンプル