1. Tutorials
  2. CSS
  3. Floating Bubble Animation

Floating Bubble Animation

In this tutorial, you will learn how to create a Floating Bubble Animation using pure CSS. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="container">
    <div class="bubble"></div>
  </div>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  width: 310px;
  height: 310px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.bubble {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 55%, rgba(226,234,250, 0.9), rgba(226,234,250, 0.9) 40%, rgba(226,234,250, 0.8) 60%, rgba(15,108,238, 0.4));
  animation: animate 2s ease-in-out infinite;
}

.bubble:before {
  content: '';
  position: absolute;
  width: 40%;
  height: 80%;
  background: radial-gradient(circle at 130% 130%, rgba(255,255,255,0) 0, rgba(255,255,255,0) 45%,rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 58%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  left: 5%;
  transform: translateX(1%) translateY(59%) rotateZ(241deg);
  filter: blur(2px);
  border-radius: 50%;
}

.bubble:after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle at 50% 80%, rgba(255,255,255,0) 74%, white 80%, white 84%, rgba(255,255,255,0) 100%);
  top: 5%;
  left: 10%;
  border-radius: 50%;
  filter: blur(2px);
  transform: rotateZ(30deg);
}

@keyframes  animate {
  0% {
    transform: scale(1) translate(0,0px);
  }
  20% {
    transform: scaleY(0.95) scaleX(1.05);
  }
  50% {
    transform: scaleY(0.98) scaleX(0.9) translate(0, 20px);
  }
  100% {
    transform: scale(1) translate(0,0px);
  }
}