Keyframe animations

dabblet.css

/* Keyframe animations */
@keyframes bounce-right {
	0%   { width: 520px; }
	40%  { width: 790px; }
	70%  { width: 750px; }
	85%  { width: 765px; }
	100% { width: 760px; }
}

@keyframes bounce-left {
	0%   { width: 520px; }
	40%  { width: 220px; }
	70%  { width: 260px; }
	85%  { width: 245px; }
	100% { width: 250px; }
}

.slider {
	/* set initial width */
	width: 520px;
		   
	/* hide the content that overflows (to allow second box to show through) */
	overflow: hidden;
	display: inline-block;
		   
	/* skew container so that it has angled edge, and set up transition */
	transform: skewX(-20deg);
	transition: width 0.3s ease-in-out;
		  
	/* give negative margin to remove gap caused by left hand skew */
	margin-left: -76px;
	border-right: 10px solid ghostwhite;
		   
	/* hide pointer events for unseen content */
	pointer-events: none;
}
		
/* set the size of the boxes and any decoration */
.box { 
	width: 880px;
	height: 330px;
	border-radius: .5em;
}
		
/* make the links the size of the full boxes (not needed for technique) */
.box a { 
	display: block; 
	width: 100%; 
	height: 100%;
}
		
.sunset {
	/* skew back by negative of parent’s skew so contents is upright */
	transform: skewX(20deg);
		  
	background: url(https://dl.dropbox.com/u/444684/splitfeature/sunset-elephant.jpg) no-repeat;
	margin-left: 76px; /* give margin to push content away from left slanted edge */
	pointer-events: auto;	/* allow pointer events for the box */
}
		
.sunrise {
	background:  url(https://dl.dropbox.com/u/444684/splitfeature/sunrise.jpg) no-repeat;
	position: absolute; 	/* remove from flow so sunset is placed on top */
	box-shadow: 0 0 10px rgba(0, 0, 0, .7);
}
		
/* make first box bigger on hover, and smaller when hover second box */
.slider:hover {
	width: 760px;
	animation: bounce-right 0.4s forwards;
}
		
.sunrise:hover + .slider { 
	width: 250px;
	animation: bounce-left 0.4s forwards;}
		
/* decoration for body, header and footer */
body {  
	/* style body. can ignore */
	font-family: helvetica, sans-serif; 
	margin: 3em; 
	background: url(https://dl.dropbox.com/u/444684/splitfeature/noiselight.png), radial-gradient(50% -80%, #d1d1d1, #d9d9d9);
}
h1 { 
	color: #2F2F2F;
	font-size: 26px;
	text-shadow: 0 0 2px white;
	margin-bottom: 1.5em;
}
		
footer { 
	position: absolute;
	bottom: 1px;
	color: dimgrey;
	text-shadow: 0 0 1px white;
	font-size: 12px;
}
footer a { 
	color: darkorange;
	text-decoration: none;
}

dabblet.html

<h1>Split view feature box with CSS skew transform and transitions</h1>
<div class="box sunrise"><a href="#box2"></a></div>
<div class="slider">
	<div class="box sunset"><a href="#box1"></a></div>
</div>
 <footer>
  	<p>Handcrafted by <a href="http://www.twitter.com/dstorey">@dstorey</a> for 
  	<a href="http://www.generatedcontent.org/123456/split-feature">GeneratedContent.org</a>,
  	and slightly improved by <a href="https://www.twitter.com/gnclmorais">@gnclmorais</a>.</p>
  	<p>Sunset image, <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">Some rights reserved</a> by <a href="http://www.flickr.com/photos/42429527@N03/">najeebkhan2009</a>. Sunrise image, <a href="http://creativecommons.org/licenses/by-nd/2.0/">Some rights reserved</a> by <a href="http://www.flickr.com/photos/petehogan/">3dpete</a>.</p>
 </footer>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}