body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  height: 100vh;
  width: 100vw;
  display: flex;
  background: #000;
}
section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f00, #f00, #0f0, #0ff, #ff0, #0ff);
  mix-blend-mode: color;
  pointer-events: none;
}
video {
  object-fit: cover;
}
h1 {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 5rem;
  font-family: sans-serif;
  letter-spacing: 0.2rem;
}

h1 span {
  opacity: 0;
  display: inline-block;
  animation: animate 1s linear forwards;
  text-shadow: 8px 0px 2px red;
  font-style: italic;
  margin-left: 1rem;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: rotateY(180deg);
    filter: blur(100px);
  }
  25% {
    opacity: 0;
    transform: rotateY(135deg);
    filter: blur(75px);
  }
  50% {
    opacity: 0;
    transform: rotateY(90deg);
    filter: blur(50px);
  }
  75% {
    opacity: 1;
    transform: rotateY(45deg);
    filter: blur(25px);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg);
    filter: blur(0px);
  }
}