How to make an element with background image appear using css animation/javascript
<p>I have a div tag with a background image. I want to use css animation or with combination of javascript/jquery to animate how the background image appears when the page loads. Currently, I have two vertical borders that I created with equal length and they both start off at the same position. When the page loads, one border will automatically move to the right side while the other one move to the left. During this transition, I want the div tag with the background image to slowly appear. Here's what I have so far: </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>.background-img {
  width: 10px;
  margin: 0 auto;
}
.borders {
 position: absolute;
 left: 50%;
 width: 8px;
 background-color: blue;
 height: 50px;
 border-radius: 4px;
}

.left-vertical-border {
 animation-name:move-left;
 animation-duration: 2s;   
 animation-timing-function: ease-in;
 animation-fill-mode: forwards;    

}

.right-vertical-border {
 top: 8px;
 animation-name:move-right;
 animation-duration: 2s;
 animation-timing-function: ease-in;
 animation-fill-mode: forwards; 
}

@keyframes move-left {
 from{transform: translateX(0px);}
 to{transform: translateX(-100px);}
}

@keyframes move-right {
 from{transform: translateX(0px);}
 to{transform: translateX(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="left-vertical-border borders"&gt;&lt;/div&gt;
  &lt;div class="background-img"&gt;fake bg image&lt;/div&gt;
  &lt;div class="right-vertical-border borders"&gt;&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks in advance!</p>