使用 CSS3 连续向上动画气泡？

Question

请参见下图：

http://i.imgur.com/3vTrB.png

看到背景中那些透明的圆圈了吗？我想要做的是让它们从下往上动画，然后手动跳下（离开屏幕）并重新启动动画。圆圈很简单 <span> 带有 border-radius 来制作圆圈效果。

这可能与 CSS3 有关，还是我需要 javascript？如果可能的话，我还想在向上移动的同时在 X 范围内随机向侧面移动圆圈。我想随机性需要 javascript？

如果可能的话，我将不胜感激关于如何制作它的一些建议/想法。如果不能使用 CSS，也欢迎使用 Javascript 库！

原文由 qwerty 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是依赖于 animation 属性的纯 CSS 演示（改编自本 教程）。 _更新：多亏了 TonioElGringo，气泡现在也向侧面移动，尽管移动是有节奏的，而不是随机的_：

 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;
    }
}

原文由 Asad Saeeduddin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我用纯 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;
}

原文由 Dhiraj 发布，翻译遵循 CC BY-SA 4.0 许可协议