Images Wipes with Masks

Chrome only

HTML

<div id="banner">
    <div><img src="http://css-tricks.com/examples/ImageWipes/images/banner-1.jpg" /></div>
        <div><img src="http://css-tricks.com/examples/ImageWipes/images/banner-2.jpg" /></div>
</div>

CSS

#banner {
	width: 800px;        /* Size of images, will collapse without */
	height: 300px;
	position: relative;  /* For abs. positioning inside */
}

#banner div {
	position: absolute; /* Top and left zero are implied */
}

/* Second one is on top */
#banner div:nth-child(2) {
	-webkit-animation: wipe 6s infinite;
	-webkit-animation-delay: 3s;
	-webkit-animation-direction: alternate;
	-webkit-mask-size: 2000px 2000px;
	-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, 
			color-stop(0.00,  rgba(0,0,0,1)),
			color-stop(0.45,  rgba(0,0,0,1)),
			color-stop(0.50,  rgba(0,0,0,0)),
			color-stop(0.55,  rgba(0,0,0,0)),
			color-stop(1.00,  rgba(0,0,0,0)));
}

@-webkit-keyframes wipe {
			0% {
				-webkit-mask-position: 0 0; /* Implied normally, but needed for animation */
			}
			100% {
				-webkit-mask-position: -1200px -1200px;
			}
		}