title: Zoom text on html load and fade out at different location on same page
body: <p>This is for HTML website with CSS and Javascript.</p>
  
  <p>I am trying my best to archive the below, but i am not getting what is required.</p>
  
  <p>This is for the logo which is a text, which will zoom in and out when the page loads and then it goes and sits in its place.</p>
  
  <p>Example:
  1. On page load, the text "Hello" zoom size 200% starts from top corner heading towards center of the page
  2. Page load continues - say 50% of page load, the zoom of the text heading toward center is 500%
  3. Page load completes - the text "hello" has come to center with zoom 800%
  4. Pause for 3 seconds
  5. Zooms out to 500% heading towards left top corner (logo position)
  6. zooms out to 200% heading towards left top corner (logo position)
  7. Fades out when reaching the logo
  8. Logo appears</p>
  
  <p>HTML Div:</p>
  
  <pre><code>&lt;div id="hello"&gt;
  &lt;h1 style="zoom: 200%; transition: zoom 1s ease-in-out;"&gt;hello &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function pageFullyLoaded()
  {
      var elem = document.getElementById("hello");
      elem.style.zoom = "500%";
  }
  </code></pre>