JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="animatedhrcontainer">
  <hr />
</div>

CSS

body{
  background-color:#111;
}
.animatedhrcontainer{
  padding:50px;
  background-color:#000;
}
.animatedhrcontainer hr{
  overflow:visible;
  border:none;
  height:20px;
  background-color:#000;
  position:relative;
  width:60%;
  pointer-events:none;
  border:none;
  perspective:100px;
}
.animatedhrcontainer hr:before{
  content:"";
  display:block;
  width:128px;
  height:128px;
  background-image:url(https://sleekinteractive.com/assets/cylon.jpg);
  background-size:100%;
  margin-left:-64px;
  margin-top:-64px;
  background-color:rgba(255,0,0,0.7);
  position:absolute;
  left:50%;
  top:50%;
  animation-name: cylon;
  animation-duration: 3s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  pointer-events:none;
}

@keyframes cylon {
  0%   { transform:translateX(0px); }
  25%  { transform: translateZ(-250px) translateX(-80vw); }
  50%  { transform:translateX(0px); }
  75%  { transform: translateZ(-250px) translateX(80vw); }
  100% { transform:translateX(0px); }
}