Как анимировать вырез текста над фоновым изображением

Я пытаюсь подражать анимации, показанной ниже, с помощью CSS и/или JavaScript. Я создал начальный шаг, но не могу понять, как оживить масштаб в части.

    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-->

Ответы

Ответ 1

Я придумал решение на основе вашего исходного кода с помощью -webkit-text-fill-color и -webkit-background-clip-text и добавил font-size и отрицательный text-indent для анимации. Отрицательный text-indent необходим для того, чтобы текст был "центрирован" внутри элемента, потому что текст внутри элементов всегда хочет наброситься на левый край.

  * {
    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>

Ответ 2

Возможность, используя 2 элемента, одну для изображения, другую для текста и режим наложения для достижения прозрачности:

Обратите внимание, что режим смешивания не поддерживается IE или 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>

Ответ 3

body {
  margin: 0;
}
.image {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("https://www.viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg");
  background-size: cover;
  overflow: hidden;
}
.text-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  mix-blend-mode: lighten;
  animation: 2s scale cubic-bezier(0.88, 0, 1, 0.1) infinite;
}
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(-0.3em);
  font: bold 7vw "Arial", sans-serif;
  white-space: nowrap;
}
@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(500);
  }
}

<div class="image">
  <div class="text-container">
    <div class="text">TRY THIS</div>
  </div>
</div>