Я пытаюсь подражать анимации, показанной ниже, с помощью 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-->