Transition Direction - Border

I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...

My navigation menu anchors are using the navigation-link class !

* {
  margin: 0px;
  font-family: Futura;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  color: white;
}

body {
  background-image: url("../Media/body-bg.png");
}

/* NOTE: Class */

.navigation-box {
  height: 60px;
  width: 100%;
  background-color: MediumSeaGreen;
  position: fixed;
  z-index: 1;
  min-width: 800px;
}

.navigation-menu {
  margin: 6px 15px;
  float: left;
  color: white;
}

.navigation-link {
  padding: 6px 10px;
  font-weight: 100 !important;
  font-size: 23px;
  padding-bottom: 12px;
  text-decoration: none;
  border-bottom: 0px solid DarkGreen;
  transition: left 2s, all ease-in-out 300ms;
}

.navigation-link:hover {
  color: Wheat;
  border-bottom: 3px solid DarkGreen;

}

.vline {
  border-left: 2px solid white;
  padding-bottom: 6px;
  margin: 0px 0px 0px 10px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Cabinet Psychologie | 15&egrave;me</title>
    <link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
  </head>

  <body noresize="noresize">
    <div class="navigation-box">
      <h1 class="navigation-menu">
        <a href="#" class="navigation-link" style="border-bottom: 3px solid DarkGreen;">Accueil</a><a class="vline"></a>
        <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a><a class="vline"></a>
        <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a><a class="vline"></a>
        <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
      </h1>
    </div>
  </body>

</html>

So if you know a way to make it work it would be very much appreciated

Solution

You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:

* {
  margin: 0px;
  font-family: Futura;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  color: white;
}

body {
  background-image: url("../Media/body-bg.png");
}


/* NOTE: Class */

.navigation-box {
  height: 60px;
  width: 100%;
  background-color: MediumSeaGreen;
  position: fixed;
  z-index: 1;
  min-width: 800px;
}

.navigation-menu {
  margin: 6px 15px;
  float: left;
  color: white;
}

.navigation-link {
  padding: 6px 10px;
  font-weight: 100 !important;
  font-size: 23px;
  padding-bottom: 12px;
  text-decoration: none;
  border-bottom: 0px solid DarkGreen;
  position: relative;
}

.navigation-link:before {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 50%;
  right:50%;
  background:DarkGreen;
  transition: all ease-in-out 300ms;
}

.navigation-link:hover {
  color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
  left: 0;
  right:0;
}
.vline {
  border-left: 2px solid white;
  padding-bottom: 6px;
  margin: 0px 0px 0px 10px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Cabinet Psychologie | 15&egrave;me</title>
  <link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>

<body noresize="noresize">
  <div class="navigation-box">
    <h1 class="navigation-menu">
      <a href="#" class="navigation-link active" >Accueil</a>
      <a class="vline"></a>
      <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
    </h1>
  </div>
</body>

</html>