title: Add animation to border bottom on input
body: <p>I want the color of the border-bottom of my input to change with an animation when clicked. Similar to the yellow line one this. I want this to be on all the input boxes and the select.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.input_container{
    display: inline-block;
    text-align: center;
  }
  .awsome_input{
    padding: 5px 10px;
    border: none;
    background: transparent;
    display: block;
  }
  .awsome_input_border{
    display:inline-block;
    width:0px;
    height: 2px;
    background: #FEC938;
    position: relative;
    top:-5px;
    -webkit-transition: all ease-in-out .15s;
    -o-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
  }
  .awsome_input:hover,
  .awsome_input:active, 
  .awsome_input:focus{
    outline: none;
  }
  .awsome_input:hover+.awsome_input_border,
  .awsome_input:active+.awsome_input_border, 
  .awsome_input:focus+.awsome_input_border{
    width:100%;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="input_container"&gt;
  &lt;input type="text" class="awsome_input" 
  placeholder="What do you think?"/&gt;
  &lt;span class="awsome_input_border"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried to recreate this in my code but I cant seem to get it right. Any idea how to do this? 
  I understand that the span is what creates the yellow line on the snippet but can I recreate this instead to change the border-color instead of adding another line. </p>
  
  <p>My code. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;form&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="signup-form"&gt;
        &lt;form&gt;
          &lt;input type="text" name="firstname" class="line-animation"&gt;
          &lt;span class="awsome_input_border" /&gt;
          &lt;input type="text" name="lastname" class="line-animation"&gt;
          &lt;span class="awsome_input_border" /&gt;
          &lt;select name="country"&gt;
            &lt;option value="sweden"&gt;Sweden&lt;/option&gt;
            &lt;option value="uk"&gt;United Kingdom&lt;/option&gt;
            &lt;option value="us"&gt;United States&lt;/option&gt;
            &lt;option value="canada"&gt;Canada&lt;/option&gt;
          &lt;/select&gt;
          &lt;span class="awsome_input_border" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  
  .signup-form {
    background-color: #efefef;
    width: 50%;
  }
  
  .signup-form form {
    padding: 20px 10px
  }
  
  .signup-form input[type=text], select {
    border: none;
    border-bottom: 2px solid darkgrey;
    background-color: inherit;
    margin-right: 20px;
  }
  
  .signup-form input[type=text]:focus, select:focus {
    outline: none;
    border-bottom: 2px solid #02add7;
  }
  </code></pre>