title: Split and Merge image animation
body: <p>I want to split image into 2 pieces and then show a text between them and then merge the pieces again into one image and let the text fade out.
  <img src="https://i.stack.imgur.com/h81PE.png" alt="Picture of it made in Photoshop"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id="top" class="fullscreen"&gt;
        &lt;header class="fullscreen"&gt;&lt;img src="img/logo.png" id="logo"&gt;
          &lt;div class="icon-scroll"&gt;&lt;/div&gt;
        &lt;/header&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#top header {
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  </code></pre>