Pure css3 popup element

popup.html

<style>
  .wrap {
    -webkit-transition: all 1s;
    position:absolute;
    bottom: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    -webkit-transition-delay: 1s;
  }
  .thing {
    height: 200px;
    width: 200px;
    background: red;
    position: absolute;
    bottom: 0;
    -webkit-transform: translate(0px,400px);
    -webkit-transition: all 1s;
  }
  .wrap.shown {
    height: 400px;
    width: 400px;
    -webkit-transition-delay: 0s;
  }
  .shown .thing {
    -webkit-transform: translate(0px,0px);
  }
</style>
<button onclick="document.querySelectorAll('.wrap')[0].classList.toggle('shown')">Show</button>
<div class="wrap">
  <div class="thing">
</div>