JSFiddle - React, Tailwind, and code Playground

HTML

<div class="relative">
<div class="animated bounceInDown product-intro">
    <div class="animated colorShift"></div>
</div>
</div>

CSS

.relative { position: relative;  left: 200px;}

.product-intro {
	position: absolute;
	width: 245px;

}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}
	10% {
		opacity: 1;
		transform: translateY(30px);
	}
	15% {
		transform: translateY(-10px);
	}
	30% {
		transform: translateY(0);
	}
	80% {
		transform: translateY(0);
	}
	85% {
		transform: translateY(-10px);
	}
	90% {
		opacity: 1;
		transform: translateY(30px);
	}
	100% {
		opacity: 0;
		transform: translateY(-2000px);
	}
}

@keyframes colorShift {
	0% { background-position: 0 0;}
	33% { background-position: 0 0;}
	34% { background-position: -245px 0;}
	66% { background-position: -245px 0;}
	67% { background-position: -490px 0;}
	100% { background-position: -490px 0;}
}

.animated {
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	   -moz-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	   -moz-animation-name: bounceInDown;
	        animation-name: bounceInDown;
	-webkit-animation-duration: 5s;
	   -moz-animation-duration: 5s;
	        animation-duration: 5s;
}

.colorShift {
	height: 550px;
	background: transparent url('http://stage.awesimals.com/wp-content/themes/skeleton_childtheme/assets/img/sprite-awe.png') no-repeat 0 0;
	-webkit-animation-name: colorShift;
	   -moz-animation-name: colorShift;
	        animation-name: colorShift;
	-webkit-animation-duration: 15s;
	   -moz-animation-duration: 15s;
	        animation-duration: 15s;
}