X Y Bubbles

<section>
    <div></div>
</section>
<section>
    <div></div>
</section>

body {
  background-color: springgreen;
  height: 100vh;
  margin: 0;
}

section {
  position: absolute;
  width: 50%;
  height: 100%;
  animation: sideways 5s infinite linear;
}

section + section,
section + section div {
  animation-delay: -2.5s;
}

@keyframes sideways {
  0%, 75% {
    left: 0;
  }
  25%, 50% {
    left: 50%;
  }
}

div {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: blue;
  height: 50%;
  border-radius: 100%;
  animation: updown 5s infinite linear;
}

@keyframes updown {
  0%, 25%, 100% {
    top: 0;
  }
  50%, 75% {
    top: 50%;
  }
}