Water drops

This animation could be used to enhance the design of your website.

In order to achieve it you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting it into the code element in order to avoid FOUC as the code block is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

HTML:

<div class="dr-section">
  <span class="water-drop1"></span>
  <span class="water-drop2"></span>
  <span class="water-drop3"></span>
</div>

CSS:

.dr-section {
  padding: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #202020;
  justify-content: center;
  min-height: 75vh;
  width: 100%;
}
.water-drop1 {
  position: relative;
  margin: 2rem;
  width: 150px;
  height: 150px;
  border-radius: 70% 55% / 62% 63% 68%;
  background: rgba(231, 245, 251, 0);
  box-shadow: inset 10px 10px 10px rgba(231, 245, 251, 0.1),
    inset 10px -10px 40px rgba(255, 255, 255, 0.1),
    inset -10px 10px 30px rgba(255, 255, 255, 0.1),
    inset -10px 10px 30px rgba(255, 255, 255, 0.1),
    10px 20px 15px rgba(0, 0, 0, 0.5);
  animation: border2 2s linear infinite;
}
.water-drop2 {
  position: relative;
  margin: 2rem;
  width: 150px;
  height: 150px;
  border-radius: 92% 59% / 95% 65% 72%;
  background: rgba(231, 245, 251, 0);
  box-shadow: inset 10px 10px 10px rgba(231, 245, 251, 0.1),
    inset 10px -10px 40px rgba(255, 255, 255, 0.1),
    inset -10px 10px 30px rgba(255, 255, 255, 0.1),
    inset -10px 10px 30px rgba(255, 255, 255, 0.1),
    10px 20px 15px rgba(0, 0, 0, 0.5);
  animation: border2 2.5s linear infinite;
}
.water-drop3 {
  position: relative;
  margin: 2rem;
  width: 150px;
  height: 150px;
  border-radius: 58% 66% / 54% 82% 42%;
  background: rgba(231, 245, 251, 0);
  box-shadow: inset 10px 10px 20px rgba(231, 245, 251, 0.1),
    inset 10px -10px 40px rgba(255, 255, 255, 0.1),
    inset -10px 10px 30px rgba(255, 255, 255, 0.1),
    inset -10px 10px 30px rgba(255, 255, 255, 0.1),
    10px 20px 15px rgba(0, 0, 0, 0.5);
  animation: border2 3s linear infinite;
}
.water-drop1:before {
  content: "";
  position: absolute;
  background: rgba(231, 245, 251, 0.3);
  top: 35px;
  left: 40px;
  width: 15px;
  height: 15px;
  border-radius: 70% 55% / 62% 63% 68%;
  box-shadow: 10px 10px 27px rgba(0, 0, 0, 0.5);
  animation: translate2 2s linear infinite;
}
.water-drop1:after {
  content: "";
  position: absolute;
  background: rgba(231, 245, 251, 0.1);
  top: 50px;
  left: 52px;
  width: 10px;
  height: 10px;
  border-radius: 70% 55% / 62% 63% 68%;
  box-shadow: 10px 10px 27px rgba(0, 0, 0, 0.5);
  animation: translate2 2s linear infinite;
}
.water-drop2:before {
  content: "";
  position: absolute;
  background: rgba(231, 245, 251, 0.3);
  top: 45px;
  left: 40px;
  width: 15px;
  height: 15px;
  border-radius: 92% 52% / 95% 45% 72%;
  box-shadow: 10px 10px 27px rgba(0, 0, 0, 0.5);
  animation: translate2 2.5s linear infinite;
}
.water-drop2:after {
  content: "";
  position: absolute;
  background: rgba(231, 245, 251, 0.1);
  top: 60px;
  left: 52px;
  width: 10px;
  height: 10px;
  border-radius: 92% 52% / 95% 45% 72%;
  box-shadow: 10px 10px 27px rgba(0, 0, 0, 0.5);
  animation: translate2 2.5s linear infinite;
}
.water-drop3:before {
  content: "";
  position: absolute;
  background: rgba(231, 245, 251, 0.3);
  top: 40px;
  left: 35px;
  width: 15px;
  height: 15px;
  border-radius: 58% 66% / 54% 82% 42%;
  box-shadow: 10px 10px 27px rgba(0, 0, 0, 0.5);
  animation: translate2 3s linear infinite;
}
.water-drop3:after {
  content: "";
  position: absolute;
  background: rgba(231, 245, 251, 0.1);
  top: 55px;
  left: 50px;
  width: 10px;
  height: 10px;
  border-radius: 58% 66% / 54% 82% 42%;
  box-shadow: 10px 10px 27px rgba(0, 0, 0, 0.5);
  animation: translate2 3s linear infinite;
}
@keyframes border2 {
  0% {
    border-radius: 92% 59% / 95% 65% 72%;
  }
  50% {
    border-radius: 72% 79% / 75% 85% 62%;
  }
  100% {
    border-radius: 92% 59% / 95% 65% 72%;
  }
}
@keyframes translate2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-3px, -3px);
  }
  100% {
    border-radius: translate(0px, 0px);
  }
}