CSSアニメーションで水中の泡を表現する方法

この記事は2019年11月5日に書かれたもので、内容が古い可能性がありますのでご注意ください。

季節はずれではありますが、シンプルな泡（バブル）の表現がしたかったのでデモを作成してみました。

DEMO

デモでは泡の他にもイラストを置いてみました。かわいい…
イルカちゃんはレスポンシブ対応にしています。
海の動物の組み合わせるのも良いですね。

HTML

<body>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</body>

.bubbleが泡1つずつの指示になるので、この数で泡の数が決まります。
今回は泡5つにしています。

CSS

body {
margin: 0;
padding: 0;
background: url("背景画像") no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
}

.bubbles {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
top: 0;
left: 0;
}

.bubble {
position: absolute;
bottom: -40;
width: 40px;
height: 40px;
background-color: transparent;
border: 1px solid #fff;
border-radius: 50%;
animation: bubble 10s ease-in infinite;
}

.bubble:nth-child(1) {
width: 20px;
height: 20px;
left: 30%;
animation-duration: 6s;
}

.bubble:nth-child(2) {
left: 20%;
animation-duration: 3.5s;
}

.bubble:nth-child(3) {
width: 30px;
height: 30px;
left: 30%;
animation-duration: 7s;
}

.bubble:nth-child(4) {
width: 50px;
height: 50px;
left: 67%;
animation-duration: 6s;
}

.bubble:nth-child(5) {
width: 20px;
height: 20px;
left: 70%;
animation-duration: 4.5s;
}

@keyframes bubble {
  0% {
    bottom: -100px;
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    bottom: 1000px;
  }
}

bodyに背景画像を敷いて、.bubblesで泡全体のCSSを整えます。

その後に.bubble:nth-child()でそれぞれのアニメーションを指示します。
:nth-child()は .bubbleの何番目かを指定しています。
なので :nth-child(2)だと .bubble の2番目ということになります。
泡のサイズと左からどのくらいの位置に配置するか、アニメーションの時間を設定しています。

@keyframesのtranslateXで泡特有のゆらゆらとした表現を加えています。

それぞれの値は実際に変えてみると分かりやすいので面白いですよ。

DEMO

こちらの記事を参考にさせていただきました。
CSS animation で遊び倒す　- bubble –

イルカちゃんのかわいいイラストはこちらのサイトのものを使用しました。
無料イラスト/春夏秋冬/イラストわんパグ

海の背景画像はこちらのサイトのものを使用しました。
かわいい＆かっこいい無料イラスト素材集｜イラストイメージ