Keyframe animation in infinity loop, try to fix can anyone fix this?

h1 {
      color: transparent;
      position: absolute;
      opacity: 0;
      margin-top: -0.5em;
      margin-left: -0.5em;
      animation: cinematicInOut 5s ease-in-out 2s;
      z-index:99999;
    }

    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: -0.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;

I’ve tried many different combinations of animation-direction but to no avail.
The above works but when it gets to the second animation, it keeps repeating only that animation and does not loop

example: https://codepen.io/scootman/pen/xLJmYQ