Animate an element to the size of screen in fixed position

Question

How do I animate a <div> to expand to fit the screen upon clicking. All while staying in fixed position, then revealing the contents of that <div>

Image:

Answer 1

1. Set a CSS3 transition to your element.
2. Create a class that makes your element 100vw and 100vh (viewport width height units)
3. Add that class on click

$("#box").on("click", function() {
  $(this).toggleClass("fullScreen");
});

html, body{height:100%;margin:0;}

/* YOUR BOX */
#box{
  position: fixed;
  overflow: hidden; /* in order to contain content */
  
  /* The initial styles: */
  border-radius: 25px;
  background: red;
  left:50px; bottom:50px;
  width: 50px;
  height: 50px;
  

  /* TRANSITION TO THE RESCUE */
          transition: 0.7s;
  -webkit-transition: 0.7s;
}

/* ADD THIS CLASS WITH JS */
#box.fullScreen{
  /* Your override styles: */
  border-radius: 0;
  background: gold;
  left:0; bottom:0;
  width: 100vw;
  height:100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">CLICK</div>

Answer 2

You can use transform: scale( ) to scale the full screen box proportionally down and up. Scaling also affects the content of the box. The small version of the box then has the same aspect ratio as the full screen box.

Example

$("#box").on("click", function() {
  $(this).toggleClass("fullScreen");
});

html, body{height:100%;margin:0;}

/* YOUR BOX */
#box{
  position: fixed;
  cursor: pointer;
  background-color: red;
  
  /* make the box full screen */
  width: 100vw; /* IE9+ */
  height:100vh; /* IE9+ */
  top: 0;
  left: 0;

  /* scale it down to 0.1 (10%) initially,
     make an offset from bottom left */
  -ms-transform: translate(50px, -50px) scale(0.1); /* IE9 */
  -ms-transform-origin: left bottom; /* IE9 */
  transform: translate(50px, -50px) scale(0.1);
  transform-origin: left bottom;

  /* smooth transition (IE10+) */
  -webkit-transition: all 0.7s ease;
          transition: all 0.7s ease;
}

/* ADD THIS CLASS WITH JS */
#box.fullScreen {
  /* Your override style:
     remove offset, scale it to 1 (100%) */
  -ms-transform: translate(0px, 0px) scale(1); /* IE9 */
  transform: translate(0px, 0px) scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>click the box</div>
<div id="box">your content</div>