CSSで波のようなアニメーションを実装

波のようなアニメーションをCSSで実装する方法をご紹介します。

目次
  1. 疑似要素
  2. SVG

疑似要素

疑似要素を使用した方法です。
border-radiusプロパティで波模様を付けて、animationプロパティでtransformプロパティのrotate関数を使用して回転させ波を表現しています。

波1つ

HTML

<div class="sample"></div>

CSS

.sample {
	position:relative;
	overflow:hidden;
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);
	margin:0 auto;
	width:300px;
	height:300px;
	background-color:#fff;
}

	.sample::before {
		position:absolute;
		top:-150%;
		left:-50%;
		border-radius:50% 50% / 50% 70%;
		width:200%;
		height:200%;
		content:"";
		background-color:#3168dd;
		animation:wave linear 6s infinite;
	}

@keyframes wave {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

波2つ

波が2つの場合は疑似要素をもう1つ増やし形状を変えて、アニメーションを遅らせることで波を表現します。

HTML

<div class="sample"></div>

CSS

.sample {
	position:relative;
	overflow:hidden;
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);
	margin:0 auto;
	width:300px;
	height:300px;
	background-color:#fff;
}

	.sample::before,
	.sample::after {
		position:absolute;
		left:-50%;
		width:200%;
		height:200%;
		content:"";
		background-color:#3168dd;
		animation:wave linear 6s infinite;
	}

	.sample::before {
		top:-150%;
		border-radius:50% 50% / 50% 70%;
	}

	.sample::after {
		top:-146%;
		border-radius:30% 70% / 30% 50%;
		opacity:0.2;
		animation-delay:0.4s;
	}

@keyframes wave {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

SVG

SVGを使用した方法です。
SVGのpath要素を使用して波模様を描画し、animationプロパティでtransformプロパティのtranslate関数を使用して横方向へ移動させ波を表現しています。

波1つ

HTML

<div class="sample">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300" width="900" height="300">
		<path d="M 0,0 v 100,0 q 150,50 300,0 t 300,0 q 150,50 300,0 v 0,-100 Z" />
	</svg>
</div>

CSS

.sample {
	overflow:hidden;
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);
	margin:0 auto;
	width:300px;
	height:300px;
	background-color:#fff;
}

	.sample svg path {
		fill:#3168dd;
		animation:wave linear 4s infinite;
	}

@keyframes wave {
	from {
		transform:translate(0);
	}
	to {
		transform:translate(-66.66%);
	}
}

波3つ

波が3つの場合は、SVGのx軸をずらしてアニメーションの速度を変えることで波を表現しています。
次のコードでは同じ波を表現しているため、SVGのdefs要素で波を定義し、use要素で定義した波を複製して描画しています。

HTML

<div class="sample">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" width="1200" height="300">
		<defs>
			<path d="M 0,0 v 100,0 q 150,50 300,0 t 300,0 q 150,50 300,0 t 300,0 v 0,-100 Z" id="wave" />
		</defs>
		<use xlink:href="#wave" />
		<use xlink:href="#wave" x="-30" y="10" />
		<use xlink:href="#wave" x="-60" />
	</svg>
</div>

CSS

.sample {
	overflow:hidden;
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);
	margin:0 auto;
	width:300px;
	height:300px;
	background-color:#fff;
}

	.sample svg use {
		fill:#3168dd;
		animation:wave linear 4s infinite;
	}

	.sample svg use:nth-of-type(2),
	.sample svg use:nth-of-type(3) {
		opacity:0.2;
	}

	.sample svg use:nth-of-type(2) {
		animation-duration:5s;
	}

	.sample svg use:nth-of-type(3) {
		animation-duration:3s;
	}

@keyframes wave {
	from {
		transform:translate(0);
	}
	to {
		transform:translate(-50%);
	}
}