<!-- HTML Code for Animated Forward Arrows -->
<p>A simple representation of animated forward arrow!</p>

<div id="ForwardArrow">
  <div class="GlidingArrow">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay1">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay2">
    <div class="arrow"></div>
  </div>
  <div class="GlidingArrow delay3">
    <div class="arrow"></div>
  </div>
</div>

/* OPTIONAL: Styles for the demo. */
body {
  background: #ffc40c;
  padding: 2rem;
}
p {
  font: 1rem/1.45 "Operator Mono";
  color: black;
  text-align: center;
}

/* CSS for animated Forward Arrows.*/
#ForwardArrow {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow {
  width: 2vw;
  height: 2vw;
  border: 2vw solid;
  border-color: black transparent transparent black;
  transform: rotate(-225deg);
}
.GlidingArrow {
  position: absolute;
  -webkit-animation: slide 5s linear infinite; 
          animation: slide 5s linear infinite;
}
.delay1 {
  -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}
.delay2 {
  -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}
.delay3 {
  -webkit-animation-delay: 4s; 
    animation-delay: 4s;
}

/* Defining animation Keyframes */
@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); }	
   20% { opacity:1; transform: translateX(-9vw); }	
   80% { opacity:1; transform: translateX(+9vw); }	
  100% { opacity:0; transform: translateX(+15vw); }	
}
@keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); }	
   20% { opacity:1; transform: translateX(-9vw); }	
   80% { opacity:1; transform: translateX(+9vw); }	
  100% { opacity:0; transform: translateX(+15vw); }	
}