Transition when using Hover - How to do a "reverse" mode?

Question

Here is the transition:

.subcont {
  width: 250px;
  height: 180px;
  background: purple;
}

.border1 {
  position: absolute;
  width: 5px;
  height: 0;
  margin-left: 250px;
  margin-top: -5px;
  background: red;
  transition-delay: 0;
  transition-duration: 0.3s;
}

.border2 {
  position: absolute;
  width: 0px;
  height: 5px;
  margin-left: 250px;
  margin-top: 180px;
  background: red;
  transition-delay: 0.3s;
  transition-duration: 0.3s;
}

.border3 {
  position: absolute;
  width: 5px;
  height: 0;
  margin-left: -5px;
  margin-top: 180px;
  background: red;
  transition-delay: 0.6s;
  transition-duration: 0.3s;
}

.border4 {
  position: absolute;
  width: 0;
  height: 5px;
  margin-left: -5px;
  margin-top: -5px;
  background: red;
  transition-delay: 0.9s;
  transition-duration: 0.3s;
}

.subcont:hover>.border1 {
  height: 190px;
}

.subcont:hover>.border2 {
  width: 255px;
  margin-left: -5px;
}

.subcont:hover>.border3 {
  height: 190px;
  margin-top: -5px;
}

.subcont:hover>.border4 {
  width: 255px;
}

<div class="subcont">
  <div class="border1"></div>
  <div class="border2"></div>
  <div class="border3"></div>
  <div class="border4"></div>
</div>

As you can see, it changes the position and size of certain Ivs to make a border appear in the div. subcont; what I’d like to know is: how to create a reverse effect to that? I mean, when the user gives you a deal on div. subcont this effect occurs, but how to make it, the moment the user takes the mouse off the div. subcont, this effect reverts (disappear first the div border4, then the border3, etc.)?

Answer 1

I used the pseudo class :not and reversed the value of transition-delay forehead now

          .subcont {
            width: 250px;
            height: 180px;
            background: purple;
          }
          
          .border1 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: 250px;
            margin-top: -5px;
            background: red;
            transition-delay: 0;
            transition-duration: 0.3s;
          }
          
          .border2 {
            position: absolute;
            width: 0px;
            height: 5px;
            margin-left: 250px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.3s;
            transition-duration: 0.3s;
          }
          
          .border3 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: -5px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.6s;
            transition-duration: 0.3s;
          }
          
          .border4 {
            position: absolute;
            width: 0;
            height: 5px;
            margin-left: -5px;
            margin-top: -5px;
            background: red;
            transition-delay: 0.9s;
            transition-duration: 0.3s;
          }
          
          .subcont:hover>.border1 {
            height: 190px;
            
          }
          .subcont:not(:hover)>.border1 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: 250px;
            margin-top: -5px;
            background: red;
            transition-delay: 0.9s;
            transition-duration: 0.3s;
            
          }
          
          .subcont:hover>.border2 {
            width: 255px;
            margin-left: -5px;
          }
          .subcont:not(:hover)>.border2 {
            position: absolute;
            width: 0px;
            height: 5px;
            margin-left: 250px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.6s;
            transition-duration: 0.3s;
          }
          
          .subcont:hover>.border3 {
            height: 190px;
            margin-top: -5px;
          }
          .subcont:not(:hover)>.border3 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: -5px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.3s;
            transition-duration: 0.3s;
          }
          
          .subcont:hover>.border4 {
            width: 255px;
          }
          .subcont:not(:hover)>.border4 {
            position: absolute;
            width: 0;
            height: 5px;
            margin-left: -5px;
            margin-top: -5px;
            background: red;
            transition-delay: 0s;
            transition-duration: 0.3s;
          }

<div class="subcont">
    <div class="border1"></div>
    <div class="border2"></div>
    <div class="border3"></div>
    <div class="border4"></div>
</div>