<button class="button">Hold</button>
<div class="modal">
  <div class="modal__content">
    <p>This is a test to replicate Androids native app-opening animation. Click on the edges to close this modal.</p>
    <p>The animation here is made with a clip-path polygon that transition from the button to fullscreen. The default state of the clip-path creates the buttons background.</p>    
  </div>
    
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto:500);
html, body {
  background: #f7b9ca;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

$bw : 3em; // Button width
$bh : 1.5em;  // Button height

.modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #22cc99;//844a2f
  width: 100%;
  height: 100%;
  clip-path: polygon( 
    calc(50% - #{$bw} ) calc(50% - #{$bh} ), 
    calc(50% + #{$bw} ) calc(50% - #{$bh} ), 
    calc(50% + #{$bw} ) calc(50% + #{$bh} ), 
    calc(50% - #{$bw} ) calc( 50% + #{$bh} ) ); // center invisible
  transition: clip-path 0.4s cubic-bezier(0,.58,.36,1);
  display: flex;
  justify-content: center;
  align-items: center;
}


.modal__content {
  opacity: 0;
  transform: translate3D(0,-1em,0);
  transition: opacity 0.1s 0s, transform 0.3s 0s; //close
  padding: 2em;
  max-width: 30em;
  color: #fff;
}

button {
  background: transparent;
  border: none;
  padding: 1em;
  color: #fff;
  z-index: 1;
  transition: opacity 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  &:active {
    outline: none;
    opacity: 0;
  }
  &:active ~ .modal {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); // full rectangle
  }
  &:active ~ .modal .modal__content {
    opacity: 1;
    transform: translate3D(0,1em,0);
    transition: opacity 0.3s 0.2s, transform 0.6s 0.2s cubic-bezier(0,.65,.06,.98); //open
  }
}

var button = document.querySelector('.button');
var modal = document.querySelector('.modal');

// Set will-change when the element is hovered
button.addEventListener("focus", hintBrowser, true);
button.addEventListener("blur", hintBrowser, true);

button.addEventListener('click', hintBrowser );
modal.addEventListener("transitionend", removeHint, false);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  modal.style.willChange = 'clip-path';
  console.log('add will-change');
}

function removeHint() {
  this.style.willChange = 'auto';
  console.log('remove will-change');
}