title: CSS Ease-in-out to full screen
body: <p>I have a black background div of a size which contains an image. </p>
  
  <pre><code>  &lt;div id="Banner"&gt;
    &lt;img onclick="expand();" src="hola.jpg"&gt;
    &lt;/div&gt;
  
    #Banner {
      position:relative;
      height:50px;
      width:50px;
      margin:0 auto;
      background-color:#000000;
      -webkit-transition: all 0.5s ease-in-out 0.5s;
      -moz-transition: all 0.5s ease-in-out 0.5s;
      -o-transition: all 0.5s ease-in-out 0.5s;
      transition: all 0.5s ease-in-out 0.5s;
    }
  
  &lt;script type="text/javascript"&gt;
    function expand(){
      document.getElementById('Banner').style['height'] = '250';
      document.getElementById('Banner').style['width'] = '250';
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>So when the user clicks on the image, the div transitions to 250, 250.</p>
  
  <p>My problem is that, i want it to to transition to full screen. The following javascript
  function does expand to fullscreen but the transition effect doesn't come. I need to do it from a javascript code without jquery.</p>
  
  <pre><code>  function expand(){
      document.getElementById('Banner').style['position'] = 'absolute';
      document.getElementById('Banner').style['height'] = '100%';
      document.getElementById('Banner').style['width'] = '100%';
      document.getElementById('Banner').style['top'] = '0';
      document.getElementById('Banner').style['left'] = '0';
    }
  </code></pre>
  
  <p>Please advice.</p>
  
  <p><strong>Update : Solution</strong></p>
  
  <p>Roger below has provided with an alternative solution. This takes care if the document
  has already been scrolled and is another place. Will expand the div to full browser screen.</p>
  
  <pre><code>sz=getSize();        //function returns screen width and height in pixels
  currentWidth=200;
  currentHeight=200;
  scalex=sz.W/currentWidth;
  scaley=sz.H/currentHeight;
  transx=0-((document.getElementById("Banner").offsetLeft+(currentWidth/2))-(sz.W/2))+document.body.scrollLeft;
  transy=0-((document.getElementById("Banner").offsetTop+(cuttentHeight/2))-(sz.H/2))+document.body.scrollTop;
  transx = transx.toString();
  transy = transy.toString();
  document.getElementById("Banner").style['-webkit-transform'] = 'translate('+transx+'px,'+transy+'px) scale('+scalex+','+scaley+')';
  </code></pre>