<div class="cw_box">
	<img src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg" class="cw_img2">
	<img src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg" class="cw_img">
</div>
.cw_box {
	position: relative;
	display: inline-block;
	width: 400px;
	height: 600px;
}

.cw_img {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");
	mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");
	-webkit-mask-size: 200% 200%;
	mask-size: 200% 200%;
	width: 400px;
	height: 600px;
	-webkit-animation: testmove 2000ms linear infinite;
	animation: testmove 2000ms linear infinite;

}

.cw_img2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 600px;
	-webkit-filter: contrast(200%);
	filter: contrast(200%);
}

@-webkit-keyframes testmove {
	0% {
		-webkit-mask-position: 0px 0px;
		mask-position: 0px 0px;
	}

	100% {
		-webkit-mask-position: 18.5% 18.5%;
		mask-position: 18.5% 18.5%;
	}
}

@keyframes testmove {
	0% {
		-webkit-mask-position: 0px 0px;
		mask-position: 0px 0px;
	}

	100% {
		-webkit-mask-position: 18.5% 18.5%;
		mask-position: 18.5% 18.5%;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.