radar

HTML

<div class="port">
  <div class="message">HARMO</div>
  <div class="radar"> </div>  
  <ul class="spots"> 
    <li></li> 
    <li></li>
  </ul>
</div>

CSS

.message {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: red;
  float: left;
  margin-top: 20px;
}
.port {
  background-color: black;
  border-radius: 8px;
  height: 150px;
  width: 600px;
  overflow: hidden;
  position: relative;
}
.radar {
  background-color: green;
  background-image: linear-gradient (to right, rgba (0,0,0,0.9) 25%, rgba (0,0,0,0.1) 50%, rgba (0,0,0,0.9) 75%);
  color: white;
  height: 100%;
  width: 20px;
  animation: 3s linear 0s infinite move-eye;
}

@keyframes move-eye {
  from { margin-left: -36px; }
  to { margin-left: 620px; }
}
ul.spots  {
  position: absolute;
  top: 0;
  left: 150px;
  opacity: 0;
  animation: 15s linear 0s infinite move-planes, 15s linear 0s infinite echo;
}
ul.spots li  {
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background-color: green;
}
ul.spots li:last-child {
  transform: translate(40px, 20px);
}

@keyframes move-planes {
  from {
    top: 0%;
    left: 0%;
  }
  to {
    top: 50%;
    left: 100%;
  }
}
@keyframes echo {
  0% {opacity: 0;}
  2% {opacity: 0;}
  5% {opacity: 1;}
  12% {opacity: 1;}
  18% {opacity: 0;}
  27% {opacity: 0;}
  30% {opacity: 1;}
  37% {opacity: 1;}
  42% {opacity: 0;}
  51% {opacity: 0;}
  54% {opacity: 1;}
  61% {opacity: 1;}
  66% {opacity: 0;}
  75% {opacity: 0;}
  78% {opacity: 1;}
  85% {opacity: 1;}
  90% {opacity: 0;}
}