Untitled

dabblet.css

body{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height:100%;
}
.w-left-f,.w-left-s,.w-right-f,.w-right-s{
	width:1px;
	height: 100px;
	background-color:black !important;
	float:left;
}
.w-left-f{
	margin-left:25px;
	transform:rotate(-22deg);
	-webkit-transition-delay: 0;
}
.w-left-s{
	transform:rotate(22deg);
	margin-left:37px;
	-webkit-transition-delay: 2s;
}
.w-right-f{
	transform:rotate(-22deg);
	margin-left:37px
	-webkit-transition-delay: 4s;
}

.w-right-s{
	transform:rotate(22deg);
	margin-left:37px;
	-webkit-transition-delay:6s; 
}

.w-left-f,.w-left-s,.w-right-f,.w-right-s {      
 	-webkit-animation-duration: 3s;      
 	-webkit-animation-name: draw;    
}
@-webkit-keyframes draw {      
	from {               
		height: 0px;   
	}        
	to {         
		height: 100px;      
	}    
}  

dabblet.html

<div class="w-left-f"></div>
<div class="w-left-s"></div>
<div class="w-right-f"></div>
<div class="w-right-s"></div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}