title: CSS/JS- Split image in two animation
body: <p>I would love to animate my web page using CSS and JS.  My first webpage is made of one image centered horizontally and vertically and I would love this one to split into two images, one that goes up and on that goes down, so that my second webpage appears. I just don't know how can I split my image into two. </p>
  
  <p>My HTML is basically made of </p>
  
  <pre><code>&lt;div class="page1"&gt;
        &lt;img src="img/LogoEpaissiBlanc.png" alt="Logo" id="logoindex1"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS : </p>
  
  <pre><code>.page1 {
  height: 723px;
  display: table-cell;
  vertical-align: middle;
  }
  
  
  #logoindex1{
    margin: auto;
    display: block;
  width: 30%;
  }
  </code></pre>