JSFiddle - React, Tailwind, and code Playground

HTML

<h1></h1>
<h2></h2>

CSS

h1, h2 {
	width: 200px; /* frame width */
	height: 200px; /* frame height */
	animation-duration: 1s;
	animation-timing-function: steps(29);
	animation-fill-mode: forwards;
}

h1 {
	background-image: url("http://i.imgur.com/bfvowLA.png"); /* 30 frames */
	animation-name: image-strip;
}

h2 {
	background-color: #800;
	animation-name: color-grade;
}

@keyframes image-strip {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0 -5800px;
	}
}

@keyframes color-grade {
	from {
		background-color: #800;
	}
	to {
		background-color: #080;
	}
}