.bubble {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 0;
}
.bubble:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #6924ff0f;
  transform-origin: 50% 50%;
  -webkit-animation: wobble 20s ease-in-out infinite both alternate, move 10s ease-in-out infinite both;
  animation: wobble 20s ease-in-out infinite both alternate, move 10s ease-in-out infinite both;
}
.bubble img {
  position: relative;
  z-index: 0;
  width: 80% !important;
}
@-webkit-keyframes wobble {
  0%, 100% {
    border-radius: 65% 35% 55% 45%/55% 50% 50% 45%;
  }
  20% {
    border-radius: 40% 60% 55% 45%/50% 60% 40% 50%;
  }
  40% {
    border-radius: 55% 45% 40% 60%/50% 70% 30% 50%;
  }
  60% {
    border-radius: 60% 40% 55% 45%/60% 40% 60% 40%;
  }
  80% {
    border-radius: 50% 50% 35% 65%/55% 70% 30% 45%;
  }
}

@keyframes wobble {
  0%, 100% {
    border-radius: 65% 35% 55% 45%/55% 50% 50% 45%;
  }
  20% {
    border-radius: 40% 60% 55% 45%/50% 60% 40% 50%;
  }
  40% {
    border-radius: 55% 45% 40% 60%/50% 70% 30% 50%;
  }
  60% {
    border-radius: 60% 40% 55% 45%/60% 40% 60% 40%;
  }
  80% {
    border-radius: 50% 50% 35% 65%/55% 70% 30% 45%;
  }
}
@-webkit-keyframes move {
  0%, 100% {
    transform: none;
  }
  33% {
    transform: translateX(-5%) translateY(-5%) rotateY(20deg);
  }
  66% {
    transform: translateX(5%) translateY(5%) rotateY(20deg);
  }
}
@keyframes move {
  0%, 100% {
    transform: none;
  }
  33% {
    transform: translateX(-5%) translateY(-5%) rotateY(20deg);
  }
  66% {
    transform: translateX(5%) translateY(5%) rotateY(20deg);
  }
}