webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

ゆらゆら揺れるアニメーション
この記事を書いている人
Marie

Marie

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

↑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を%にするとうまくいきません。

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

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

色を変えたりして遊んでみてください

\疑似要素::beforeについてはこちらの記事も/

いいなと思ったら
TAPしてね♡↓

合わせて読んでほしい記事

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード 【CSS】だけで波がゆらゆらしているアニメーション

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)