CSS Bubble Loader Animations

Bubble loaders and animation/effects in CSS.

Welcome to our showcase of bubble loader animations/effects created entirely with pure CSS!

In this article, we’re excited to present a variety of captivating animations that involve bubbles - from enchanting blink effects to dynamic zooming, colliding animations, and even stunning bubble bar effects.

You can easily customize them to suit your specific needs.

Please note that while most of these animations are compatible with modern browsers, some of the more advanced effects might require the latest supported browser versions.

Let’s begin with HTML structure.

HTML

<div class="loader-box">
  <div class="bubble"></div>
  <div class="bubble animate"></div>
  <div class="bubble animate delay-2"></div>
</div>
<div class="loader-box">
  <div class="bubble zoom-in"></div>
  <div class="bubble zoom-out"></div>
</div>
<div class="loader-box"><div class="bubble zoom-out-xl"></div></div>
<div class="loader-box">
  <div class="bubble relative animate"></div>
  <div class="bubble relative animate delay-1"></div>
  <div class="bubble relative animate delay-2"></div>
</div>
<div class="loader-box">
  <div class="bubble relative zoom"></div>
  <div class="bubble relative zoom delay-1"></div>
  <div class="bubble relative zoom delay-2"></div>
  <div class="bubble relative zoom delay-3"></div>
</div>
<div class="cf"></div>
<br />
<div class="loader-box"><div class="bubble relative solid collide"></div></div>
<div class="loader-box">
  <div class="bubble relative solid bgt in-out-top-bottom">
    <span></span> <span></span> <span></span>
  </div>
</div>
<div class="loader-box">
  <div class="bubble relative solid bgt in-out-left-right">
    <span></span> <span></span> <span></span> <span></span> <span></span>
  </div>
</div>
<div class="loader-box">
  <div class="bubble relative solid bgt in-out-zoom">
    <span></span> <span></span> <span></span> <span></span> <span></span>
  </div>
</div>

CSS styles

/* Loader box: parent class; */
.loader-box {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
} /* Bubble */
.bubble {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  right: 0;
  margin: 0 auto;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
}
.bubble.relative {
  position: relative;
  left: 50%;
  float: left;
  margin-left: 20px;
} /* Bubble animation */
.bubble.animate {
  -webkit-animation: bubbleEffect 2s ease-out infinite;
  -moz-animation: bubbleEffect 2s ease-out infinite;
  -ms-animation: bubbleEffect 2s ease-out infinite;
  -o-animation: bubbleEffect 2s ease-out infinite;
  animation: bubbleEffect 2s ease-out infinite;
}
.bubble.animate.reverse {
  -webkit-animation: bubbleEffectReverse 2s ease-out infinite;
  -moz-animation: bubbleEffectReverse 2s ease-out infinite;
  -ms-animation: bubbleEffectReverse 2s ease-out infinite;
  -o-animation: bubbleEffectReverse 2s ease-out infinite;
  animation: bubbleEffectReverse 2s ease-out infinite;
  opacity: 1;
}
.bubble.animate.delay-1 {
  -webkit-animation: bubbleEffect 2s ease-out 0.5s infinite;
  -moz-animation: bubbleEffect 2s ease-out 0.5s infinite;
  -ms-animation: bubbleEffect 2s ease-out 0.5s infinite;
  -o-animation: bubbleEffect 2s ease-out 0.5s infinite;
  animation: bubbleEffect 2s ease-out 0.5s infinite;
}
.bubble.animate.delay-2 {
  -webkit-animation: bubbleEffect 2s ease-out 1s infinite;
  -moz-animation: bubbleEffect 2s ease-out 1s infinite;
  -ms-animation: bubbleEffect 2s ease-out 1s infinite;
  -o-animation: bubbleEffect 2s ease-out 1s infinite;
  animation: bubbleEffect 2s ease-out 1s infinite;
}
@-webkit-keyframes bubbleEffect {
  0% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
    opacity: 0;
  }
}
@keyframes bubbleEffect {
  0% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
    opacity: 0;
  }
} /* Bubble zoom effect */
.bubble.zoom {
  width: 10px;
  height: 10px;
  -webkit-animation: zoomEffect 2s ease-out infinite;
  -moz-animation: zoomEffect 2s ease-out infinite;
  -ms-animation: zoomEffect 2s ease-out infinite;
  -o-animation: zoomEffect 2s ease-out infinite;
  animation: zoomEffect 2s ease-out infinite;
}
.bubble.zoom.delay-1 {
  -webkit-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.bubble.zoom.delay-2 {
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.bubble.zoom.delay-3 {
  -webkit-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
@-webkit-keyframes zoomEffect {
  0% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
  }
  50% {
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}
@keyframes zoomEffect {
  0% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
  }
  50% {
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}
.bubble.zoom-in {
  -webkit-animation: zoomInEffect 3s ease-out infinite;
  -moz-animation: zoomInEffect 3s ease-out infinite;
  -ms-animation: zoomInEffect 3s ease-out infinite;
  -o-animation: zoomInEffect 3s ease-out infinite;
  animation: zoomInEffect 3s ease-out infinite;
  opacity: 1;
}
@-webkit-keyframes zoomInEffect {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoomInEffect {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.bubble.zoom-out {
  -webkit-animation: zoomOutEffect 3s ease-in infinite;
  -moz-animation: zoomOutEffect 3s ease-in infinite;
  -ms-animation: zoomOutEffect 3s ease-in infinite;
  -o-animation: zoomOutEffect 3s ease-in infinite;
  animation: zoomOutEffect 3s ease-in infinite;
  opacity: 1;
}
@-webkit-keyframes zoomOutEffect {
  0% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
  }
  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
  }
}
@keyframes zoomOutEffect {
  0% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
  }
  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
  }
}
.bubble.zoom-out-xl {
  -webkit-animation: zoomOutXLEffect 1s ease infinite;
  -moz-animation: zoomOutXLEffect 1s ease infinite;
  -ms-animation: zoomOutXLEffect 1s ease infinite;
  -o-animation: zoomOutXLEffect 1s ease infinite;
  animation: zoomOutXLEffect 1s ease infinite;
  opacity: 1;
}
@-webkit-keyframes zoomOutXLEffect {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  70% {
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(15);
    -moz-transform: scale(15);
    -ms-transform: scale(15);
    -o-transform: scale(15);
    transform: scale(15);
    opacity: 0;
  }
}
@keyframes zoomOutXLEffect {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  70% {
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(15);
    -moz-transform: scale(15);
    -ms-transform: scale(15);
    -o-transform: scale(15);
    transform: scale(15);
    opacity: 0;
  }
} /* Bubble collide efffect */
.bubble.solid.collide {
  position: relative;
  width: 25px;
  height: 25px;
  opacity: 1;
  background: #6c6c6c;
  -webkit-animation: bubbleCollideEffect 1s 0.25s infinite;
  -moz-animation: bubbleCollideEffect 1s 0.25s infinite;
  -ms-animation: bubbleCollideEffect 1s 0.25s infinite;
  -o-animation: bubbleCollideEffect 1s 0.25s infinite;
  animation: bubbleCollideEffect 1s 0.25s infinite;
}
.bubble.solid.collide:before,
.bubble.solid.collide:after {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 100%;
  z-index: 9;
  top: 0;
  background: #6c6c6c;
}
.bubble.solid.collide:before {
  left: -25px;
  -webkit-animation: bubbleCollideLeft 1s ease-out infinite;
  -moz-animation: bubbleCollideLeft 1s ease-out infinite;
  -ms-animation: bubbleCollideLeft 1s ease-out infinite;
  -o-animation: bubbleCollideLeft 1s ease-out infinite;
  animation: bubbleCollideLeft 1s ease-out infinite;
}
@-webkit-keyframes bubbleCollideLeft {
  0%,
  100% {
    left: -25px;
  }
  40% {
    left: -50px;
  }
  50% {
    left: -25px;
  }
}
@keyframes bubbleCollideLeft {
  0%,
  100% {
    left: -25px;
  }
  40% {
    left: -50px;
  }
  50% {
    left: -25px;
  }
}
.bubble.solid.collide:after {
  right: -25px;
  -webkit-animation: bubbleCollideRight 1s 0.5s ease-out infinite;
  -moz-animation: bubbleCollideRight 1s 0.5s ease-out infinite;
  -ms-animation: bubbleCollideRight 1s 0.5s ease-out infinite;
  -o-animation: bubbleCollideRight 1s 0.5s ease-out infinite;
  animation: bubbleCollideRight 1s 0.5s ease-out infinite;
}
@-webkit-keyframes bubbleCollideRight {
  0%,
  100% {
    right: -25px;
  }
  40% {
    right: -50px;
  }
  50% {
    right: -25px;
  }
}
@keyframes bubbleCollideRight {
  0%,
  100% {
    right: -25px;
  }
  40% {
    right: -50px;
  }
  50% {
    right: -25px;
  }
}
.bubble.solid.bgt {
  opacity: 1;
  background: transparent;
  width: 25px;
  height: 25px;
} /* Bubble in out from top to bottom */
.bubble.solid.in-out-top-bottom span {
  position: absolute;
  content: " ";
  top: 0;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: #6c6c6c;
  border-radius: 100%;
}
.bubble.solid.in-out-top-bottom span:first-child {
  left: -30px;
  -webkit-animation: bubbleInOutTBEffect 1.5s ease infinite;
  -moz-animation: bubbleInOutTBEffect 1.5s ease infinite;
  -ms-animation: bubbleInOutTBEffect 1.5s ease infinite;
  -o-animation: bubbleInOutTBEffect 1.5s ease infinite;
  animation: bubbleInOutTBEffect 1.5s ease infinite;
}
.bubble.solid.in-out-top-bottom span:nth-child(2) {
  left: 0;
  opacity: 0;
  -webkit-animation: bubbleInOutTBEffect 1.5s ease 0.5s infinite;
  -moz-animation: bubbleInOutTBEffect 1.5s ease 0.5s infinite;
  -ms-animation: bubbleInOutTBEffect 1.5s ease 0.5s infinite;
  -o-animation: bubbleInOutTBEffect 1.5s ease 0.5s infinite;
  animation: bubbleInOutTBEffect 1.5s ease 0.5s infinite;
}
.bubble.solid.in-out-top-bottom span:last-child {
  right: -30px;
  opacity: 0;
  -webkit-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
  -moz-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
  -ms-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
  -o-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
  animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
}
@-webkit-keyframes bubbleInOutTBEffect {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-25px);
    -moz-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    -o-transform: translateY(-25px);
    transform: translateY(-25px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(25px);
    -moz-transform: translateY(25px);
    -ms-transform: translateY(25px);
    -o-transform: translateY(25px);
    transform: translateY(25px);
  }
}
@keyframes bubbleInOutTBEffect {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-25px);
    -moz-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    -o-transform: translateY(-25px);
    transform: translateY(-25px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(25px);
    -moz-transform: translateY(25px);
    -ms-transform: translateY(25px);
    -o-transform: translateY(25px);
    transform: translateY(25px);
  }
} /* Bubble in out from left to right */
.bubble.solid.in-out-left-right,
.bubble.solid.in-out-zoom {
  margin-left: 70px;
}
.bubble.solid.in-out-left-right span {
  position: absolute;
  content: " ";
  top: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #6c6c6c;
  border-radius: 100%;
}
.bubble.solid.in-out-left-right span {
  opacity: 0;
}
.bubble.solid.in-out-left-right span:first-child {
  left: -25px;
  -webkit-animation: bubbleInOutLREffect 2.5s ease-out infinite;
  -moz-animation: bubbleInOutLREffect 2.5s ease-out infinite;
  -ms-animation: bubbleInOutLREffect 2.5s ease-out infinite;
  -o-animation: bubbleInOutLREffect 2.5s ease-out infinite;
  animation: bubbleInOutLREffect 2.5s ease-out infinite;
}
.bubble.solid.in-out-left-right span:nth-child(2) {
  left: -50px;
  -webkit-animation: bubbleInOutLREffect 2.5s ease-out 0.15s infinite;
  -moz-animation: bubbleInOutLREffect 2.5s ease-out 0.15s infinite;
  -ms-animation: bubbleInOutLREffect 2.5s ease-out 0.15s infinite;
  -o-animation: bubbleInOutLREffect 2.5s ease-out 0.15s infinite;
  animation: bubbleInOutLREffect 2.5s ease-out 0.15s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(3) {
  left: -75px;
  -webkit-animation: bubbleInOutLREffect 2.5s ease-out 0.3s infinite;
  -moz-animation: bubbleInOutLREffect 2.5s ease-out 0.3s infinite;
  -ms-animation: bubbleInOutLREffect 2.5s ease-out 0.3s infinite;
  -o-animation: bubbleInOutLREffect 2.5s ease-out 0.3s infinite;
  animation: bubbleInOutLREffect 2.5s ease-out 0.3s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(4) {
  left: -100px;
  -webkit-animation: bubbleInOutLREffect 2.5s ease-out 0.45s infinite;
  -moz-animation: bubbleInOutLREffect 2.5s ease-out 0.45s infinite;
  -ms-animation: bubbleInOutLREffect 2.5s ease-out 0.45s infinite;
  -o-animation: bubbleInOutLREffect 2.5s ease-out 0.45s infinite;
  animation: bubbleInOutLREffect 2.5s ease-out 0.45s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(5) {
  left: -125px;
  -webkit-animation: bubbleInOutLREffect 2.5s ease-out 0.6s infinite;
  -moz-animation: bubbleInOutLREffect 2.5s ease-out 0.6s infinite;
  -ms-animation: bubbleInOutLREffect 2.5s ease-out 0.6s infinite;
  -o-animation: bubbleInOutLREffect 2.5s ease-out 0.6s infinite;
  animation: bubbleInOutLREffect 2.5s ease-out 0.6s infinite;
}
@-webkit-keyframes bubbleInOutLREffect {
  0%,
  100% {
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
  }
  25% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
}
@keyframes bubbleInOutLREffect {
  0%,
  100% {
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
  }
  25% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
} /* Bubble in out with scale */
.bubble.solid.in-out-zoom span {
  position: absolute;
  content: " ";
  top: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #6c6c6c;
  border-radius: 100%;
  opacity: 0;
}
.bubble.solid.in-out-zoom span:first-child {
  left: -25px;
  -webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0.6s infinite;
  -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0.6s infinite;
  -ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0.6s infinite;
  -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0.6s infinite;
  animation: bubbleInOutZoomEffect 2.5s ease-out 0.6s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(2) {
  left: -50px;
  -webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0.45s infinite;
  -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0.45s infinite;
  -ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0.45s infinite;
  -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0.45s infinite;
  animation: bubbleInOutZoomEffect 2.5s ease-out 0.45s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(3) {
  left: -75px;
  -webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0.3s infinite;
  -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0.3s infinite;
  -ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0.3s infinite;
  -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0.3s infinite;
  animation: bubbleInOutZoomEffect 2.5s ease-out 0.3s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(4) {
  left: -100px;
  -webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0.15s infinite;
  -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0.15s infinite;
  -ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0.15s infinite;
  -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0.15s infinite;
  animation: bubbleInOutZoomEffect 2.5s ease-out 0.15s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(5) {
  left: -125px;
  -webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
  -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
  -ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
  -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
  animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
}
@-webkit-keyframes bubbleInOutZoomEffect {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  33.33% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  66.66% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@keyframes bubbleInOutZoomEffect {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  33.33% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  66.66% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

Feel free to experiment and modify these animations to match your project’s design and aesthetic.