h1 {
  font-size: 4em;
  line-height: 0.6;
}
.animated-text h1 {
  position: absolute;
  opacity: 0;
  transition: opacity 500ms ease 0s;
}
.animated-text h1.active  {
  position: absolute;
  opacity: 1;
}
.animated-text span {
  display: inline-block;
  opacity: 0;
}
.animated-text h1.active span {
     animation:pop 1s ease-in-out 1 forwards;
     animation-delay:2s;
     animation-delay:var(--animate-delay)
}
h1 big {
  display: inline-block;
  margin-right: 10px;
}
@keyframes pop {
 0% {
  opacity:0
 }
 50% {
  transform:scale(1.15);
  opacity:1
 }
 to {
  transform:scale(1);
  opacity:1
 }
}