制作のご相談はこちら
CSSアニメーションで水中の泡を表現する方法

公開日 : 2019年11月05日

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


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

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 –

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

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