CSS ANİMASYON 2 (BORDER)

CSS

body {  background-color: #000;  }

	@keyframes aniustalt{   
		0% {width:0;box-shadow:none; }
		100% { width:calc(100% + 30px);box-shadow:0px 0px 50px white; } 
	}

	@keyframes anisolsag{   
		0% {height:0;box-shadow:none;  }
		100% { height:calc(100% + 15px);box-shadow:0px 0px 50px white; } 
	}

	.container {
		margin:10rem auto;
		border:15px dotted #aaa;
		height:50px;
		position: relative; 
		width:60%;
	}
	
	.container div { 
		position:absolute; 
		background-color: orange  ;
		animation-fill-mode: forwards;
		animation-timing-function:linear; 
	}

	.ust {top:-15px;  left:-15px;  }
	.alt {bottom:-15px; right:-15px;  animation-delay:1.3s; } 
	.sag {right:-15px; top:0; animation-delay:1s; } 
	.sol  {  left:-15px;bottom:-15px; animation-delay:2.3s;}

	.ust , .alt  { 
		height:15px; 
		animation-name:aniustalt;
		animation-duration:1s;  
	}

	.sol , .sag {
		width:15px; 
		animation-name:anisolsag;
		animation-duration:.3s; 
	}

HTML

<div class="container">
		<div class="ust"></div>
		<div class="alt"></div>
		<div class="sol"></div>
		<div class="sag"></div> 
</div>