.orbit {
  height: 100px;
}

.orb {
  position: absolute;
  bottom: 16%;
  left: 1%;
  width: 36px;
  height: 36px;
  background-color: white;
  opacity: 0;
  box-shadow:
   0 0 6px #FFFFFF,
   0 0 16px #FFFFFF,
   0 0 32px #FFFFFF,
   0 0 64px #FFFFFF,
   0 0 82px #FFFFFF,
   0 0 102px #FFFFFF,
   0 0 151px #FFFFFF;
   border-radius: 50%;
   animation: swim 42s linear infinite;
   animation-delay: .6s;
}

.orb2 {
  position: absolute;
  top: 16%;
  right: 1%;
  width: 36px;
  height: 36px;
  background-color: white;
  opacity: 0;
  box-shadow:
   0 0 6px #FFFFFF,
   0 0 16px #FFFFFF,
   0 0 32px #FFFFFF,
   0 0 64px #FFFFFF,
   0 0 82px #FFFFFF,
   0 0 102px #FFFFFF,
   0 0 151px #FFFFFF;
   border-radius: 50%;
   animation: swim2 42s linear infinite;
   animation-delay: .6s;
}

@keyframes swim {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  8% {
    transform: translate(116px, -396px);
    opacity: 1;
  }
  9% {
    transform: translate(118px, -398px);
    opacity: 0;
  }
  10% {
    transform: translate(120px, -400px);
    opacity: .4;
  }
  18% {
    transform: translate(236px, 16px);
    opacity: 1;
  }
  19% {
    transform: translate(238px, 18px);
    opacity: 0;
  }
  20% {
    transform: translate(240px, 20px);
    opacity: .6;
  }
  28% {
    transform: translate(356px, -426px);
    opacity: 1;
  }
  29% {
    transform: translate(358px, -428px);
    opacity: 0;
  }
  30% {
    transform: translate(360px, -430px);
    opacity: .3;
  }
  38% {
    transform: translate(476px, -64px);
    opacity: 1;
  }
  39% {
    transform: translate(478px, -62px);
    opacity: 0;
  }
  40% {
    transform: translate(480px, -60px);
    opacity: .8;
  }
  48% {
    transform: translate(596px, -396px);
    opacity: 1;
  }
  49% {
    transform: translate(598px, -398px);
    opacity: 0;
  }
  50% {
    transform: translate(600px, -400px);
    opacity: .2;
  }
  58% {
    transform: translate(716px, 4px);
    opacity: 1;
  }
  59% {
    transform: translate(718px, 2px);
    opacity: 0;
  }
  60% {
    transform: translate(720px, 0px);
    opacity: .92;
  }
  68% {
    transform: translate(836px, -436px);
    opacity: 1;
  }
  69% {
    transform: translate(838px, -438px);
    opacity: 0;
  }
  70% {
    transform: translate(840px, -440px);
    opacity: .46;
  }
  78% {
    transform: translate(956px, 14px);
    opacity: 1;
  }
  79% {
    transform: translate(958px, 12px);
    opacity: 0;
  }
  80% {
    transform: translate(960px, 10px);
    opacity: .46;
  }
  88% {
    transform: translate(1076px, -416px);
    opacity: 1;
  }
  89% {
    transform: translate(1078px, -418px);
    opacity: 0;
  }
  90% {
    transform: translate(1080px, -420px);
    opacity: .12;
  }
  98% {
    transform: translate(1196px, 4px);
    opacity: 1;
  }
  99% {
    transform: translate(1198px, 2px);
    opacity: 0;
  }
  100% {
    transform: translate(1200px, 0px);
    opacity: 0;
  }
}


@keyframes swim2 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  8% {
    transform: translate(-116px, 396px);
    opacity: 1;
  }
  9% {
    transform: translate(-118px, 398px);
    opacity: 0;
  }
  10% {
    transform: translate(-120px, 400px);
    opacity: .76;
  }
  18% {
    transform: translate(-236px, -16px);
    opacity: 1;
  }
  19% {
    transform: translate(-238px, -18px);
    opacity: 0;
  }
  20% {
    transform: translate(-240px, -20px);
    opacity: .54;
  }
  28% {
    transform: translate(-356px, 426px);
    opacity: 1;
  }
  29% {
    transform: translate(-358px, 428px);
    opacity: 0;
  }
  30% {
    transform: translate(-360px, 430px);
    opacity: .14;
  }
  38% {
    transform: translate(-476px, 64px);
    opacity: 1;
  }
  39% {
    transform: translate(-478px, 62px);
    opacity: 0;
  }
  40% {
    transform: translate(-480px, 60px);
    opacity: .86;
  }
  48% {
    transform: translate(-596px, 396px);
    opacity: 1;
  }
  49% {
    transform: translate(-598px, 398px);
    opacity: 0;
  }
  50% {
    transform: translate(-600px, 400px);
    opacity: .16;
  }
  58% {
    transform: translate(-716px, -4px);
    opacity: 1;
  }
  59% {
    transform: translate(-718px, -2px);
    opacity: 0;
  }
  60% {
    transform: translate(-720px, 0px);
    opacity: .64;
  }
  68% {
    transform: translate(-836px, 436px);
    opacity: 1;
  }
  69% {
    transform: translate(-838px, 438px);
    opacity: 0;
  }
  70% {
    transform: translate(-840px, 440px);
    opacity: .96;
  }
  78% {
    transform: translate(-956px, -14px);
    opacity: 1;
  }
  79% {
    transform: translate(-958px, -12px);
    opacity: 0;
  }
  80% {
    transform: translate(-960px, -10px);
    opacity: .84;
  }
  88% {
    transform: translate(-1076px, 416px);
    opacity: 1;
  }
  89% {
    transform: translate(-1078px, 418px);
    opacity: 0;
  }
  90% {
    transform: translate(-1080px, 420px);
    opacity: .4;
  }
  98% {
    transform: translate(-1196px, -4px);
    opacity: 1;
  }
  99% {
    transform: translate(-1198px, -2px);
    opacity: 0;
  }
  100% {
    transform: translate(-1200px, 0px);
    opacity: 0;
  }
}