SOURCE

<div class="m_0">
      <div class="eye">
        <div class="eye1">
        </div>
        <div class="eye2">
        </div>
      </div>
    </div>

.m_0 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12vh;
    width: 100%;
}

.eye {
    display: flex;
    width: 240px;
    align-items: center;
    justify-content: space-between;
    animation: myfirst 13s infinite linear;
}

.eye div {
    width: 40px;
    height: 100px;
    background: #409EFF;
    border-radius: 10px;
}
@keyframes myfirst {
  2% {
    transform: translateX(0px) rotateX(0deg);
  }
  3% {
    transform: rotateX(90deg);
  }

  4% {
    transform: rotateX(0deg);
  }

  8% {
    transform: translateX(-100px);
  }
  12% {
    transform: translateX(-100px);
  }
  /*  */
  13% {
    transform: translateX(-100px) rotateX(90deg);
  }

  14% {
    transform: translateX(-100px) rotateX(0deg);
  }

  20% {
    transform: translateX(50px);
  }
  23% {
    transform: translateX(50px);
  }
  25% {
    transform: translateX(0px);
  }
  29% {
    transform: translateX(0px);
  }
  30% {
    transform: translateX(0px) rotateX(90deg);
  }
  31% {
    transform: translateX(0px) rotateX(0deg);
  }

  35% {
    transform: translateX(-100px);
  }

  40% {
    transform: translateX(0px);
  }
  44% {
    transform: translateX(0px);
  }
  45% {
    transform: rotateX(90deg);
  }

  46% {
    transform: rotateX(0deg);
  }
  /*  */
  54% {
    transform: rotateX(0deg);
  }
  55% {
    transform: rotateX(90deg);
  }

  56% {
    transform: rotateX(0deg);
  }
  /*  */
  67% {
    transform: rotateX(0deg);
  }
  68% {
    transform: rotateX(90deg);
  }
  70% {
    transform: rotateX(0deg);
  }
  100% {
    transform: translateX(0px) rotateX(0deg);
  }
}