title: Zoom Effect when Page is Loaded Doesn't Work as Wanted
body: <p>I am trying to get an effect which is to zoom in on a logo centred on the page when the page is loaded. I am using the following HTML and JS code:</p>
  
  <pre><code>&lt;div style="display: table-cell; vertical-align: middle; text-align: center;"&gt;
      &lt;img id="logo" src="images/logo2.png" style="zoom: 200%; transition: zoom 1s ease-in-out;"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS </p>
  
  <pre><code>document.addEventListener("load", pageFullyLoaded, true);
  
  function pageFullyLoaded()
  {
      var elem = document.getElementById("logo");
      elem.style.zoom = "300%";
  }
  </code></pre>
  
  <p>The result is really odd.</p>
  
  <ol>
  <li>It display the logo in it's normal size,</li>
  <li>then it <strong>jumps</strong> on a super zoomed in version of the logo (> 1000%),</li>
  <li>zoom in on the logo even more (1000% to 1500% say) for the duration of the transition,</li>
  <li>jump back to the normal logo size and position (which is correct, and this is the final positon and size I want).</li>
  </ol>
  
  <p>So obviously this technique doesn't work:</p>
  
  <ol>
  <li>the jump at the beginning is ugly but I only suppose this happens because 2) is incorrect anyway. As it should start by default with a zoom value of 200% (which is defined in the style of the div) and then the JS should make it zoom to 300%. So there should be no jump visible really.</li>
  <li>I don't understand why I get this incredibly zoomed in version of the logo at the start of the animation. Basically it's almost like if the entire image was filling up the screen.</li>
  </ol>
  
  <p>Any idea on how to do this reliably, please? Thank you.</p>