JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="28" height="65" viewBox="0 0 28 65" xmlns="http://www.w3.org/2000/svg" class="center-block svgscroll"><title>Explore</title><g fill="none" fill-rule="evenodd">
							<path d="M5 44.7l7 6.953 7-6.953" class="svgarrow sa1" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M3 50.66l9 8.94 9-8.94" class="svgarrow sa2" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</g></svg>

CSS

.svgarrow {
  -moz-animation: drop 1s infinite;
  -webkit-animation: drop 1s infinite;
  animation: drop 1s infinite;
}
.svgarrow.sa1 {
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.svgarrow.sa2 {
  -moz-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

@-moz-keyframes drop {
  0% {
    -moz-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(4px);
    transform: translateY(4px);
    opacity: 1;
  }
}
@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    opacity: 1;
  }
}
@keyframes drop {
  0% {
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    opacity: 1;
  }
}