Unfolding map

dabblet.css

/**
 * Unfolding map
 */
html {
	min-height: 100%;
	background: linear-gradient(top, #ccc, #f6f6f6);
}
.map {
	animation-name: unfold;
	height: 400px;
	left: 50%;
	margin: -200px -200px;
	perspective: 1000px;
	position: absolute;
	top: 50%;
	width: 400px;
}
.map,
.fold {
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 0;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}
.fold {
	background: grey url(http://cl.ly/image/0g022b2H1w3c/amsterdam%20-%20Google%20Maps.png) no-repeat 0 0;
	height: 50%;
	position: absolute;
	width: 50%;
}


@keyframes unfold {
	50% { box-shadow: 0 600px 400px -400px transparent inset; }
	100% { box-shadow: 0 600px 400px -400px rgba(0,0,0,.5) inset; }
}
@keyframes unfold1 { 
	50% { box-shadow: 0 -300px 100px -100px rgba(0,0,0,.5) inset; }
	100% { box-shadow: 0 -100px 100px -100px transparent inset; }
}



@keyframes unfold2 { 
	0% { transform: rotateY(-180deg); } 
	50% { transform: rotateY(0deg); box-shadow: 0 -300px 100px -100px rgba(0,0,0,.5) inset; }
	100% { box-shadow: 0 -100px 100px -100px transparent inset; }
}
@keyframes unfold3 { 
	0% { transform: rotateX(180deg); box-shadow: -100px 0 100px -100px black inset; } 
	50% { transform: rotateX(180deg); box-shadow: -100px 0 100px -100px transparent inset; }
	100% { transform: rotateX(0deg); }
}
@keyframes unfold4 { 
	0% { transform: rotateY(-180deg) rotateX(180deg); }
	25% { box-shadow: 0 100px 100px -100px rgba(255,255,255,1) inset; }
	50% { transform: rotateY(0deg) rotateX(180deg); }
	100% { transform: rotateX(0deg); }

}


.fold1 {
	animation-name: unfold1;
	background-position: 0 0;
	left: 0;
	top: 0;
	z-index: 1;
}
.fold2 {
	animation-name: unfold2;
	background-position: 100% 0;
	right: 0;
	transform-origin: 0 100%;
	top: 0;
	z-index: 3;

}
.fold3 {
	animation-name: unfold3;
	background-position: 0 100%;
	bottom: 0;
	left: 0;
	transform-origin: 100% 0;
	z-index: 2;
}
.fold4 {
	animation-name: unfold4;
	background-position: 100% 100%;
	bottom: 0;
	right: 0;
	transform-origin: 0 0;
	z-index: 4;

}

dabblet.html

<div id="map" class="map">
	<div class="fold1 fold"></div>
	<div class="fold2 fold"></div>
	<div class="fold3 fold"></div>
	<div class="fold4 fold"></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}