JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
    <div class="scrolltip">
        <ul class="run-arrow-run">
            <li class="arrow1"></li>
            <li class="arrow2"></li>
            <li class="arrow3"></li>
        </ul>
    </div>
</div>

CSS

body {
  background:#000;
}
.container {
	width:500px;
	height:100px;
	margin:0 auto;
	position:relative;
	padding:100px 0
	}

.scrolltip {
	width:99px;
	height:125px;
	margin:0 auto;
}


.run-arrow-run { float:left; padding-left:15px; margin:0;}

.run-arrow-run li {
	width:43px;
	height:24px;
	opacity:0.3;
	float:left;
	clear:left;
	background:url(http://designrevolution.rs/sample/scroll-arrow.png) no-repeat;
	list-style:none;
	transition:all;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-duration:5s;
}
@keyframes blink1{

	  1% {opacity:.3;}
	  3% {opacity:1;}
	  10% {opacity:.3;}
}
@keyframes blink2{
	  
	  3% {opacity:.3;}
	  5% {opacity:1;}
	  12% {opacity:.3;}
}
@keyframes blink3{

	  5% {opacity:.3;}
	  7% {opacity:1;}
	  15% {opacity:.3;}
}

.arrow1 {
	animation-name:blink1;
}

.arrow2 {
	  animation-name:blink2;
}

.arrow3 {
	  animation-name:blink3;
}