【CSS】水滴が落ちて波紋が広がるアニメーション

こんにちは、素人エンジニアです。

水滴が水面に落ちて、波紋が広がっていくアニメーションを作成しました。

コピペで使ってください！

See the Pen 水滴が落ちて波紋が広がる by amateur-engineer (@amaeng) on CodePen.

HTMLの要素は、水滴と波紋3つです。

<div class="drop-shaped"></div>
<div class="ripple"></div>
<div class="ripple delay1"></div>
<div class="ripple delay2"></div>

cssの@keyframesで、水滴が落ちるアニメーションと波紋が拡がるアニメーションを作成しています。波紋は、animation-delayで2つ目と3つ目を少し遅らせるようにしています。

html {
  background: #00bfff;
}

.drop-shaped{
  position: relative;
  margin:  0 auto;
  top: -25px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 0% 100% 50% 50%/ 0% 50% 50% 100%;
  transform: rotate(45deg) skew(10deg, 10deg);
  animation: 3s cubic-bezier(.97,.03,.86,.12) 0s infinite running fall;
}

@keyframes fall {
  to {
    top: 200px;
  }
}

.ripple {
  position: relative;
  margin:  0 auto;
  top: 100px;
  width: 300px;
  height: 150px;
  border-radius: 300px / 150px;
  border: 10px solid #fff;
  transform: scale(0.01,0.01);
  opacity: 0;
  animation: 3s ease-out 3s infinite running spread;
}

@keyframes spread {
  from {
    opacity: 1;
  }
  to {
    transform: scale(1,1);
    opacity: 0;
  }
}

.delay1 {
  top: -70px;
  animation-delay: 3.3s;
}

.delay2 {
  top: -240px;
  animation-delay: 3.7s;
}

水滴（しずく、雨粒）の形の作り方はこちら

[CSS] しずくの形（雨粒の形）

こんにちは、素人エンジニアです。 cssだけで、しずくの形を作りました。コピペで使ってください。

cssアニメーションの設定についてはこちら

【CSS】@keyframesとanimationでアニメーションの設定

こんにちは、素人エンジニアです。cssでアニメーションを設定する方法を紹介します！animationと@keyframesを使って動きや変化のあるデザインを作りましょう。CSSアニメーションのサンプルどきど...

ハートバージョンもあります。

See the Pen ハートの波紋 by amateur-engineer (@amaeng) on CodePen.

ハートの形の作り方はこちら

[CSS] ハートの形（borderでもOK）

ハートの作り方を紹介しています。 borderで作る方法についても書いていま。ぜひコピペで使ってください。

以上！

↓↓ HTMLとCSSの学習はこの1冊があれば安心！! ↓↓

リンク