JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<iframe id="target" frameborder="none" src="http://forrst.com/" onload="begin()"></iframe>

CSS

body{
    margin:0;
    padding:0;
}



#target{
    margin:0;
    border:none;
    opacity:1;
    
    -webkit-transform: scale(0); 
     -moz-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
    
     -webkit-transition: -webkit-transform 1s ease-in-out;  /* Saf3.2+, Chrome */
     -moz-transition: -moz-transform 1s ease-in-out;  /* FF4+ */
      -ms-transition: -ms-transform 1s ease-in-out;  /* IE10 */
       -o-transition: -o-transform 1s ease-in-out;  /* Opera 10.5+ */
          transition: transform 1s ease-in-out;
}
#target.scaleUp{
    
    -webkit-transform: scale(1); 
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}

JavaScript

function size(){
    $('iframe').css({
        width:window.innerWidth,
        height:window.innerHeight
    });
}

function begin(){
    
    $(window).resize(size);
    size();
    
    setTimeout(function(){
    $('#target').addClass('scaleUp');        
    }, 500);
}