cross-fade testcase

dabblet.css

/* cross-fade testcase */

div {
	width: 400px;
	height: 200px;
	background-image: -moz-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
	background-image: -ms-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
	background-image: -o-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
	background-image: -webkit-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
	background-image: cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
	background-repeat: no-repeat;
}
div:hover {
	background-image: url("http://lorempixel.com/400/200/animals/2/");
	-moz-transition: 1s;
	-ms-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
}

dabblet.html

<div></div>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}