@keyframes bottomright {
  0% {
    width: 0;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  25% {
    width: 100%;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  50% {
    height: 100%;
    width: 100%;
    visibility: visible;
  }
  75% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}


@keyframes topleft {
  0% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  25% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  50% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  75% {
    width: 100%;
    height: 0;
    padding-bottom: 0;
    visibility: visible;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
  }
}


.anim {
  border: 5px solid transparent;
  position:relative ; 
}

.anim:hover {
}

.anim:after {
  content: "";
  position: absolute;
  bottom: -5px;
  padding-right: 5px;
  left: -5px;
  width: 100%;
  height: 100%;
  border-bottom: 5px solid #FFF;
  border-right: 5px solid #FFF;
  visibility: hidden;
}

.anim:before {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  padding-left: 5px;
  width: 100%;
  height: 100%;
  border-top: 5px solid #FFF;
  border-left: 5px solid #FFF;
  visibility: hidden;
}

.anim:hover:before {
  animation: topleft 1.0s ease-in-out forwards;
}

.anim:hover:after {
  animation: bottomright 1.0s ease-in-out forwards;
}