:root {
  --duration: 20s;
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #000;
  height: 100vh;
}

#white {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  background: #fff;
  width: 10vw;
  height: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;

  animation: var(--duration) linear alternate infinite move;
}

#white > img {
  width: 30%;
  height: auto;

  animation: var(--duration) steps(1, start) flip;
}

@keyframes move {
  from {
    transform: translateY(-50%) translateX(0);
  }

  to {
    transform: translateY(-50%) translateX(100vw) translateX(-100%);
  }
}

@keyframes flip {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(-1);
  }
}