.box {
width: 400px;
height: 250px;
margin: auto;
text-align: center;
color: #fff;
position: relative;
top: 50px;
cursor: pointer;
transition: 500ms ease;
}
.box:before {
position: absolute;
width: 0;
height: 2px;
content: "";
background: #fff;
top: -2px;
left: -2px;
transition: 100ms width ease 300ms;
-web-kit-transition: 100ms width ease 300ms;
}
.box:after {
position: absolute;
width: 2px;
height: 0;
content: "";
background:red;
top: -2px;
right: -2px;
transition: 100ms height ease 200ms;
-web-kit-transition: 100ms height ease 200ms;
}
