how to increase border line from the center using css animation
<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>