Reebok Ink Effect

Ink transition animation between two background images.

by Jon Fuller

HTML

<div id="mask"></div>

CSS

body {
	margin: 0;
	padding: 0;
}

/* bg image */
#mask{
	background: url(https://broomefnp.com/wp-content/uploads/patient-room.jpg) no-repeat center center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
}

/* main bg image and mask */
#mask:before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	-ms-mask: url(https://broomefnp.com/wp-content/uploads/ink-mask.png);
	-ms-mask-size: 3000% 100%;
	-ms-animation: mask-playzero 12s steps(29) infinite;
	-webkit-mask: url(https://broomefnp.com/wp-content/uploads/ink-mask.png);
	-webkit-mask-size: 3000% 100%;
	-webkit-animation: mask-playzero 12s steps(29) infinite;
	mask: url(https://broomefnp.com/wp-content/uploads/ink-mask.png);
	mask-size: 3000% 100%;
	animation: mask-playzero 12s steps(29) infinite;
	background: url(https://broomefnp.com/wp-content/uploads/titlebars-gradient-layers.jpg) no-repeat center center;
	background-size: cover;
}

/* color overlay */
#mask:after{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background-color: rgba(58, 33, 8, 0.75);
}

@-webkit-keyframes mask-playzero {
	0% {
		-webkit-mask-position: 0 0;
		-ms-mask-position: 0 0;
		-moz-mask-position: 0 0;
		-o-mask-position: 0 0;
		mask-position: 0 0;
	}
	12.5% {
		-webkit-mask-position: 100% 0;
		-ms-mask-position: 100% 0;
		-moz-mask-position: 100% 0;
		-o-mask-position: 100% 0;
		mask-position: 100% 0;
	}
	50% {
		-webkit-mask-position: 100% 0;
		-ms-mask-position: 100% 0;
		-moz-mask-position: 100% 0;
		-o-mask-position: 100% 0;
		mask-position: 100% 0;
	}
	62.5% {
		-webkit-mask-position: 0 0;
		-ms-mask-position: 0 0;
		-moz-mask-position: 0 0;
		-o-mask-position: 0 0;
		mask-position: 0 0;
	}
}

@keyframes mask-playzero {
	0% {
		-webkit-mask-position: 0 0;
		-ms-mask-position: 0 0;
		-moz-mask-position: 0 0;
		-o-mask-position: 0 0;
		mask-position: 0 0;
	}
	12.5% {
		-webkit-mask-position: 100% 0;
		-ms-mask-position: 100% 0;
		-moz-mask-position:...