Untitled

dabblet.css

.box{
	position:relative;background-color:#f1f1f1;
	width:300px;height:300px;
	margin:80px auto;z-index:3;}
.box:before{
	content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
	border:2px solid red;margin:-20px;z-index:-1;		
	clip:rect(0,100px,50px,10px);
	animation:lineA 8s linear infinite;}
.box:after{
	content:'';position:absolute;
	left:0;top:0;bottom:0;right:0;
	border:2px solid red;margin:-20px;z-index:-1;		
	clip:rect(0,100px,50px,10px);
	animation:lineB 8s linear infinite;}
@keyframes lineA{    	
	0%,100%{clip:rect(0,340px,2px,0)}    	
	25%{clip:rect(0,2px,340px,0)}    	
	50%{clip:rect(338px,340px,340px,0)}    	
	75%{clip:rect(0,340px,340px,338px)}    
}
@keyframes lineB{    	
	0%,100%{clip:rect(338px,340px,340px,0)}    	
	25%{clip:rect(0,340px,340px,338px)}    	
	50%{clip:rect(0,340px,2px,0)}    	
	75%{clip:rect(0,2px,340px,0)}    
}

dabblet.html

<div class="box"></div>

dabblet.js

// alert('Hello world!');

settings.json

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