CSS – Cylon Eye Animation

Every good robotosist knows that the best systems always have a high coolness factor.   This simple circuit produces an effect similar to the swivelling “CYLON” robot eye of Battlestar Galactica fame.  It consists of a simple 74194 Shift Register circuit. (Today we will recreate this effect in CSS/HTML5. .

<html>
<body>
<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>
</body>
</html>
<style>
.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
  padding: 15px;
}

.view_port {
  background-color: black;
  height: 50px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

</style>
Listening for dispatches