How to animate a text cutout over a background-image

Question

I'm trying to imitate the animation shown below using CSS and/or JavaScript. I have created the beginning step but cannot figure out how to animate the zooming in part.

    body {
      background-color: #222;
    }
    .container {
      background-image: url(test.jpg);
      height: 96vh;
      width: 100%;
    }
    .box {
      background-color: #fff;
      height: 98vh;
      width: 100%;
    }
    .big {
      font-size: 17vw;
      background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg) 33px 659px;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      padding-top: 24vh;
      margin-top: 0;
      text-align: center;
      animation: opac 2s infinite;
    }
@keyframes opac {
  0%, 100% {
    /*rest the move*/

  }
  50% {
  /*move some distance in y position*/
  }
}

<div class="container">
  <div class="box">
    <h1 class="big">TRY THIS</h1>
  </div>
  <!--end of box-->
</div>
<!--end of conatiner-->

And my TARGET:

Answer 1

A posibility, using 2 elements, one for the image and another for the text, and blend mode to achieve transparency:

Note that blend mode is not supported by IE or Edge

body,
html {
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://placekitten.com/1000/600);
  background-size: cover;
}
.box {
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background-color: white;
  overflow: hidden;
  mix-blend-mode: lighten;

}

.big {
  position: absolute;
  left: 20%;
  top: 30%;
  font-size: 10vw;
  color: black;
  animation: zoom 4s infinite;
}
@keyframes zoom {
  from {
    transform: scale(0.2, 0.2);
  }
  to {
    transform: scale(4, 4);
  }
}

<div class="container">
  <div class="box">
    <div class="big">TRY THIS</div>
  </div>
</div>

Answer 2

I came up with a solution based on your original code using -webkit-text-fill-color and -webkit-background-clip-text and added font-size and a negative text-indent for the animation. The negative text-indent is needed to keep the text "centered" within the element because text within elements always wants to bump up against the left edge.

  * {
    box-sizing: border-box;
  }

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

  #container {
    height: 160px;
    overflow: hidden;
    position: absolute;
    width: 600px;
  }

  #image {
    animation: scale 3000ms linear infinite;
    background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg);
    bottom: 0;
    font: 96px "Arial";
    font-weight: bold;
    left: 0;
    line-height: 160px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }

  @keyframes scale {
    0% {
      font-size: 66px;
      text-indent: 0;
    }
    16% {
      font-size: 132px;
      text-indent: 0;
    }
    80% {
      font-size: 330px;
      text-indent: -500px;
    }
    100% {
      font-size: 10000px;
      text-indent: -25300px;
    }
  }

<div id="container">
  <div id="image">try this</div>
</div>

Basically, I'm adjusting the text-indent so that as the font-size increases the middle "T" stays centered (it's really not in the center though) and then the text becomes so big (10,000 pixels!) that the "T" does the "reveal" effect by filling the space.