Анимация рамки вокруг элемента

.block { 
  width: 200px; 
  height: 50px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
} 
 
.title { 
  font-size: 16; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  position: relative; 
  z-index: 3; 
} 
 
.line { 
  position: absolute; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 2; 
} 
 
.left { 
  left: 0; 
} 
 
.right { 
  right: 0; 
} 
 
.left::before { 
  content: ''; 
  height: 0; 
  width: 1px; 
  background: black; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  animation: height .4s ease-in-out; 
  animation-fill-mode: forwards; 
} 
 
.left::after { 
  content: ''; 
  height: 1px; 
  width: 0; 
  background: black; 
  position: absolute; 
  left: 0; 
  top: 0; 
  animation: width .4s .4s ease-in-out; 
  animation-fill-mode: forwards; 
} 
 
.right::before { 
  content: ''; 
  height: 0; 
  width: 1px; 
  background: black; 
  position: absolute; 
  right: 0; 
  top: 0; 
  animation: height .4s ease-in-out; 
  animation-fill-mode: forwards; 
} 
 
.right::after { 
  content: ''; 
  height: 1px; 
  width: 0; 
  background: black; 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  animation: width .4s .4s ease-in-out; 
  animation-fill-mode: forwards; 
} 
 
@keyframes height { 
 from { height: 0; } 
 to { height: 100%; } 
} 
 
@keyframes width { 
 from { width: 0; } 
 to { width: 100%; } 
}

<div class="block"> 
  <div class="title">Мир uriage</div> 
  <div class="line left"></div> 
  <div class="line right"></div> 
</div>