【CSS】だけで波がゆらゆらしているアニメーション

2023/07/07 | 2023/03/01 7817

この記事を書いている人

Marie

フリーランスwebデザイナー＆講師
2児ママ
制作会社・インハウスデザイナーを経験し独立
オンラインwebデザイン教室ちいウェブ運営
仕事の合間の息抜きに植物を育てています♡
スプラ・DIY・将棋がすき

もっと詳しくみる

↑hoverしてね

ゆらゆらウェーブアニメーションをCSSのみで作ります。

<div class="wave"></div>

htmlでは波を入れる箱を用意します。

CSSで、箱にスタイルをあてます。

.wave {
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,.2);
	margin: 0 auto;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: rgba(255,255,255,.1);
}

波は、疑似要素::beforeを使って作成します。

.wave::before {
	position: absolute;
	bottom: -150%;
	left: -50%;
	border-radius: 50% 50% / 50% 70%;
	width: 200%;
	height: 200%;
	content: "";
	background-image: linear-gradient(80deg, #0093E9 0%, #80D0C7 50%, #fff 100%);
	animation: wave-anime linear 6s infinite;
}
@keyframes wave-anime {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

position: absolute;で絶対配置します。

borderを利用して、形を変えたものを動かすことで、波のような動きに見えるようになっています。

これで波のアニメーションは完成です

hover時に波が上までくるのは、translateを使っています。

.wave:hover::before {
	animation: wave-move 4s forwards;
}
@keyframes wave-move {
	from {
		transform: translateY(0) rotate(0);
	}
	to {
		transform: translateY(-50%) rotate(360deg);
			}
}

Y軸を基準に0から-50%の位置に移動させているだけです。

大きいエリアで使うのも可愛いです。

注）border-radiusを利用しているので、widthを%にするとうまくいきません。

ずっと見てても飽きない。

ローディングアニメにも良さそうですね