css边框动画

<div>

</div>

<style>
 div{ width:100px; height:100px; border:1px solid #7c7c7c; position:relative}
 div:after{ 
		position:absolute; content:''; border:1px solid transparent;
		width:0; height:0; z-index:0; left:0; top:0;
		transition: border-color  0s  ease-in 0.8s , width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
		-webkit-transition: border-color  0s  ease-in 0.8s , width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
	 }
	div:before{
		position:absolute; content:''; border:1px solid transparent;
		 box-sizing: border-box;
		width:0; height:0; z-index:0; bottom:-1px; right:1px;
		transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in ;
		-webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in ;
	 }
	div:hover:before{
	 	width:100%; height:100%; 
	 	border-bottom-color:#e4393c;
	 	border-left-color:#e4393c;

	 	transition:border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
		-webkit-transition:  border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s ;
	}
	div:hover:after{
	 	width:100%; height:100%; 
	 	border-top-color:#e4393c;
	 	border-right-color:#e4393c;
	 	transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
		-webkit-transition:width 0.2s ease-out, height 0.2s ease-out 0.2s;
	}

</style>