SOURCE

	<div class="cont">
			<div class="bb"> this is test</div>
		</div>

html,body{
			margin: 0;padding: 0;
			background: #101010;
		}
		.cont{
			width:500px;
			margin: 50px auto;
		}
		
		.bb{
			position: relative;
			width: 200px;
			height: 200px;
			background: #666666;
			border: 1px solid #5EF75E;
			color:#fff;
		}
		.bb:before,.bb:after{
			content: " ";
			display: block;
			position: absolute;
			width:220px;
			height:220px;
			top: -10px;
			left: -10px;
			border:2px solid #00FF00;
			z-index:10;
			box-sizing: border-box;
			-webkit-animation: clipAni 4s infinite linear;
		}
		.bb:before{
			-webkit-animation-delay: -2s;
		}
		@keyframes  clipAni{
			0%,100%{
				clip:rect(0px,220px,220px,217px);
			}
			25%{
				clip:rect(0px,220px,3px,0px);
			}
			50%{
				clip:rect(0px,3px,220px,0px);
			}
			75%{
				clip:rect(217px,220px,220px,0px);
			}			
		}