title: how to increase border line from the center using css animation
body: <p>I'm playing around with CSS animation, and I was wondering if there's a way to make a vertical line (with certain height) to grow in length automatically when the page loads. Idealy I want the vertical line to grow from the middle and grow from both top and bottom to a specific height. So far I can only make it increase its length from top to bottom. Here's what I have: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vertical-line {
   margin-left: 100px;
   background: red;
   width: 8px;
   border-radius: 4px;
   animation: grow 4s forwards;
  }
  
  @keyframes grow {
   0% {
    height: 10px;
   }
   100% {
    height: 100px;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt; 
    &lt;title&gt;Creating Vertical borders using animation/javascript&lt;/title&gt; 
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="vertical-line"&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>