JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="scroll-slide"></div>

CSS

body {background:#3b414f;}

@keyframes bounce {
  0% {
	-webkit-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
  	-webkit-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
  	-webkit-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
  	-webkit-transform:translateY(-50%);
  }
  40% {
  	-webkit-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
  	-webkit-transform:translateY(-30%);
  }
  70% {
  	-webkit-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
  	-webkit-transform:translateY(-15%);
  }
  90% {
  	-webkit-transform:translateY(0%);
  	padding-bottom: 8px;
  }
  95% {
  	-webkit-transform:translateY(-10%);
  }
  97% {
  	-webkit-transform:translateY(0%);
  	padding-bottom: 9px;
  }
  99% {
  	-webkit-transform:translateY(-5%);
  }
  100% {
  	-webkit-transform:translateY(0);
  	padding-bottom: 9px;
    opacity: 1;
  }
}

.scroll-slide {
    height:57px;
    width:25px;
    background:url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/scroll.png') no-repeat;
    display:block;
    position:absolute;
    z-index:200;
    left:50%;
    bottom:30px;
    margin:0 0 0 -13px;
    
	animation: bounce 800ms ease-out 2s infinite;   
}