Анимация ключевых кадров в цикле ⇐ CSS

[Anonymous]

Анимация по ключевым кадрам в бесконечном цикле, попробуйте исправить, может ли кто-нибудь это исправить?
Я пробовал много разных комбинаций направления анимации, но безрезультатно.
Ниже работает, но когда он доходит до второй анимации, он продолжает повторять только эту анимацию и не зацикливается.

Код: Выделить всё

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;
}
}

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/786 ... on-in-loop