Animate bubbles upwards continuously with CSS3?
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;
}
}
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;
}