Arrow down Animation

.c-arrow-down{
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 40px;
  cursor: pointer;
  color: getColor('green');
  font-family: Rock Salt;
  @include font-size(1.67);
}
.c-arrow-down span{
  display: block;
  width: 20px;
  height: 20px;
  //border-bottom: 5px solid getColor('green');
  //border-right: 5px solid getColor('green');
  transform: rotate(90deg);
  margin: -10px;
  animation: animate 2s infinite;
  margin: 0 auto;
}
.c-arrow-down span:nth-child(2){
  animation-delay: -0.2s;
}
.c-arrow-down span:nth-child(3){
  animation-delay: -0.4s;
}
@keyframes animate {
  0%{
    opacity: 0;
    transform: rotate(90deg) translateX(-10px);
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: rotate(90deg) translateX(0px);
  }
}

<div class="c-arrow-down">
  <span>></span>
  <span>></span>
  <span>></span>
</div>