Knockout text (background-clip:text)

by robjoeol

HTML

<div class="omg">Nice!</div>

CSS

.omg {
  position: relative;

  width:max-content;
  height:max-content;
  margin: 0 auto;

  color: transparent;
  font-weight: bold;
  font-size: 300px;
  font-family:monospace;

  background-image: url(https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-clip: text;
  -webkit-background-clip: text;

  border:solid 1px black;
}

.omg::before {
  position: absolute;
  z-index:-1;

  width:100%;
  height: 100%;

  background-color:black;

  content:'';
}

.animate{
  animation-duration: 5.5s;
  animation-fill-mode: forwards;
  animation-name: grow;
  transform-origin: center center;
}
 

@keyframes grow {
  90% {
    transform: scale(1.2);
  }

  92% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(100px) scale(60);
  }
}