Animate bubbles upwards continuously with CSS3?

Question

See the following image:

https://i.sstatic.net/F3znK.png

See those transparent circles in the background? What i want to do is make them animate from the bottom up, and then manually jump down (off screen) and re-start the animation. The circles are simple <span> elements with border-radius to make the circle effect.

Is this possible to do with CSS3, or will i be needing javascript for that? I would also, if possible, like to move the circles randomly sideways within an X range while moving up. I would imagine the randomness would require javascript?

If possible, i would appreciate some suggestions/ideas as for how to make it. If not possible with CSS, Javascript libraries is welcome as well!

Heilungkiang

Could you please put up a jsFiddle for testing? – Twinflower

As of right now i only have the HTML and CSS for "static" bubbles, i haven't added any animation yet. – Heilungkiang

Yes, that's fine. Just so we can have a starting point. – Twinflower

Answer 1

Here is a pure CSS demonstration (adapted from this tutorial) that relies on the animation property. Update: Thanks to TonioElGringo the bubbles now also move sideways, although the motion is rhythmic, not random:

html,
body,
#bubbles { height: 100% }
body { overflow: hidden }
#bubbles { padding: 100px 0 }
.bubble {
    width: 60px;
    height: 60px;
    background: #ffb200;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
}

.x1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.2;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 350px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 470px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds {
    0% {
        top: 500px;
    }
    100% {
        top: -500px;
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}

@-moz-keyframes moveclouds {     
    0% {
        top: 500px;
    }

    100% {
        top: -500px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}
@-o-keyframes moveclouds {
    0% {
        top: 500px;
    }
    100% {
        top: -500px;
    }
}

@-o-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}

Twinflower

Thank you, that looks very promising! I'm at work atm so i'll look into it deeper in a few hours. – Heilungkiang

Just played a bit with it to add the wavering (just a infinite alternate animation on margin-left): jsfiddle.net/zr7sb/10 (I didn't add support besides webkit, just copy-paste everything 3 times...) – Hedgcock

Fair warning: css animations are extremely cpu intensive for animations taking longer than 1s- at least for mobile devices and old computers. Consider switching to js based animations, as it manages resources a lot more efficiently. – Semple

Great example but unfortunately it doesn't seem to work with IE10 – Blandina

I eventually got it to work with IE10. See demo here: jsfiddle.net/p5gpx/629 – Blandina

Answer 2

A very beautiful working example I have created with pure CSS:

@keyframes greenPulse {
  0% {box-shadow:0 0 30px #4bbec8}
  50% {box-shadow:0 0 80px #4bbec8}
  100% {box-shadow:0 0 30px #4bbec8}
}
div#beaker span.glow {
  width:100%;
  height:100%;
  background:##222;
  position:relative;
  display:block;
  border-radius:200px;
  animation:greenPulse 2s infinite;
  -webkit-animation:greenPulse 2s infinite;
  -moz-animation:greenPulse 2s infinite;
  -o-animation:greenPulse 2s infinite;
}
@keyframes bubbleUp {
  0% {bottom:110px;-webkit-transform:scale(.9);opacity:0}
  1% {bottom:110px;-webkit-transform:scale(.3);opacity:0}
  30% {bottom:110px;-webkit-transform:scale(.8);opacity:1}
  95% {bottom:545px;-webkit-transform:scale(.3);opacity:1}
  99% {bottom:550px;-webkit-transform:scale(3);opacity:0}
  100% {bottom:110px;-webkit-transform:scale(.9);opacity:0}
}
div#beaker span.bubble {
  background:#fff;
  width:80px;
  height:80px;
  position:absolute;
  display:block;
  left:110px;
  bottom:110px;
  border-radius:100px; 
  background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
  background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
  background:gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
  animation:bubbleUp 4s infinite ease-in-out;
  -webkit-animation:bubbleUp 4s infinite ease-in-out;
  -o-animation:bubbleUp 4s infinite ease-in-out;
  -moz-animation:bubbleUp 4s infinite ease-in-out;
}

Dkl

Answer 3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Bubble Effect Create Using HTML and CSS</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            /* background-color: #00ff00; */
            background-image: linear-gradient(#00ff00,#00ff11,#11ee10);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        .box h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            justify-content: space-between;
        }

        .bubble-box {
            display: flex;
            position: absolute;
            justify-content: space-around;
            align-items: center;
            bottom: -20%;
            width: 100%;
        }

        .bubble {
            width: 50px;
            animation: bubble 5s linear infinite;
        }


        .bubble:nth-child(1) {
            animation-delay: 2s;
            width: 40px;
        }

        .bubble:nth-child(2) {
            animation-delay: 3s;
            width: 60px;
        }

        .bubble:nth-child(3) {
            animation-delay: 1s;
            width: 30px;
        }

        .bubble:nth-child(4) {
            animation-delay: 5s;
            width: 35px;
        }

        .bubble:nth-child(5) {
            animation-delay: 4s;
            width: 70px;
        }

        @keyframes bubble {
            0% {
                transform: translateY(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            70% {
                opacity: 1;
            }

            100% {
                transform: translateY(-80vh);
                opacity: 0;
            }
        }
    </style>
</head>
    <body>
        <div class="box">
            <div class="bubble-box">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
            </div>
        </div>
    </body>
</html>

Airdrie