JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">
    <div>
        <img src="http://i.imgur.com/vklf6kK.png" />
    </div>
    <div>
        <img src="http://i.imgur.com/uszeRpk.png" />
    </div>
</div>

CSS

#banner {
    width: 300px;
	height: 300px;
	position: relative;
}

#banner div {
	position: absolute;
}

#banner div:nth-child(2) {
	-webkit-animation: wipe 6s;
	-webkit-animation-delay: 0s;
	-webkit-animation-direction: up;
	-webkit-mask-size: 300px 3000px;
    -webkit-mask-position: 300px 300px;
	-webkit-mask-image: -webkit-gradient(linear, left bottom, left top,
		color-stop(0.00,  rgba(0,0,0,1)),
		color-stop(0.25,  rgba(0,0,0,1)),
		color-stop(0.27,  rgba(0,0,0,0)),
		color-stop(0.80,  rgba(0,0,0,0)),
		color-stop(1.00,  rgba(0,0,0,0)));
}

@-webkit-keyframes wipe {
    0% {
		-webkit-mask-position: 0 0;
	}
	100% {
		-webkit-mask-position: 300px 300px;
	}
}