JSFiddle - React, Tailwind, and code Playground

HTML

<div id=rect><div></div></div>

CSS

#rect {
  position: relative;
  width: 200px;
  height: 100px;
}

#rect:before,
#rect:after,
#rect>div:before,
#rect>div:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
}

#rect:before {
  top: 0;
  left: 0;
  border-top: 2px solid;
  animation: top .3s linear forwards;
}

#rect:after {
  bottom: 0;
  right: 0;
  border-top: 2px solid;
  animation: bottom .3s .6s linear forwards;
}

#rect>div:before {
  top: 0;
  right: 0;
  border-left: 2px solid;
  animation: right .3s .3s linear forwards;
}

#rect>div:after {
  bottom: 0;
  left: 0;
  border-left: 2px solid;
  animation: left .3s .9s linear forwards;
}

@keyframes top {
  from {width: 0;}
  to {width: 100%;}
}

@keyframes right {
  from {height: 0;}
  to {height: 100%;}
}

@keyframes bottom {
  from {width: 0;right: 0;}
  to {width: 100%;}
}

@keyframes left {
  from {height: 0;bottom: 0;}
  to {height: 100%;}
}