h1 Bark Side Down presents
h1 A cinematic CSS animation
h1 Using text-shadow

body {
  margin:0;
  font-family:lato,sans-serif;
  font-size:16px;
  display:flex;
  justify-content:center; 
  align-items:center;
  flex-wrap:wrap;
  height:100vh;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/wyperfeld.jpg);
  background-size:cover;
  background-position:center top;
  color:white;
}

h1 {
  color:transparent; // text shadow does all the work
  position:absolute;
  opacity:0;
  margin-top:-.5em;
  margin-left:-.5em;
  animation: cinematicInOut 5s ease-in-out 2s;
}
h1:nth-child(2) {
  animation-delay:7s;
}
h1:nth-child(3) {
  animation-delay:12s;
}


@keyframes cinematicInOut {
  0% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:-.5em;
  }
  25% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  75% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  100% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:0;
  }
}