Анимация-задержка не работает должным образом на iOS, почему?

Question

У меня есть следующий код во фрагменте. Он отлично работает везде, кроме iOS. Я полагаю, что проблема заключается в задержке анимации, поскольку некоторые абзацы animatad анимируются в одно и то же время. Вы можете увидеть демонстрацию http://stassabiomassa.com/ (слова, выходящие из головы левых драконов).

Кто-нибудь знает проблему? Пожалуйста помоги. Благодаря!

.dragon-speech:nth-of-type(1){ 
 
    -webkit-animation-name: dragon-speech_animation; 
 
    -moz-animation-name: dragon-speech_animation; 
 
    -ms-animation-name: dragon-speech_animation; 
 
    -o-animation-name: dragon-speech_animation; 
 
    animation-name: dragon-speech_animation; 
 
    -webkit-animation-duration: 10s; 
 
    -moz-animation-duration: 10s; 
 
    -ms-animation-duration: 10s; 
 
    -o-animation-duration: 10s; 
 
    animation-duration: 10s; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-timing-function: linear; 
 
    -o-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-delay: 0.2s; 
 
    -moz-animation-delay: 0.2s; 
 
    -ms-animation-delay: 0.2s; 
 
    -o-animation-delay: 0.2s; 
 
    animation-delay: 0.2s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-iteration-count: infinite; 
 
    -ms-animation-iteration-count: infinite; 
 
    -o-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -ms-animation-fill-mode: forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.dragon-speech:nth-of-type(2){ 
 
    -webkit-animation-name: dragon-speech_animation; 
 
    -moz-animation-name: dragon-speech_animation; 
 
    -ms-animation-name: dragon-speech_animation; 
 
    -o-animation-name: dragon-speech_animation; 
 
    animation-name: dragon-speech_animation; 
 
    -webkit-animation-duration: 10s; 
 
    -moz-animation-duration: 10s; 
 
    -ms-animation-duration: 10s; 
 
    -o-animation-duration: 10s; 
 
    animation-duration: 10s; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-timing-function: linear; 
 
    -o-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-delay: 2.2s; 
 
    -moz-animation-delay: 2.2s; 
 
    -ms-animation-delay: 2.2s; 
 
    -o-animation-delay: 2.2s; 
 
    animation-delay: 2.2s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-iteration-count: infinite; 
 
    -ms-animation-iteration-count: infinite; 
 
    -o-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -ms-animation-fill-mode: forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.dragon-speech:nth-of-type(3){ 
 
    -webkit-animation-name: dragon-speech_animation; 
 
    -moz-animation-name: dragon-speech_animation; 
 
    -ms-animation-name: dragon-speech_animation; 
 
    -o-animation-name: dragon-speech_animation; 
 
    animation-name: dragon-speech_animation; 
 
    -webkit-animation-duration: 10s; 
 
    -moz-animation-duration: 10s; 
 
    -ms-animation-duration: 10s; 
 
    -o-animation-duration: 10s; 
 
    animation-duration: 10s; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-timing-function: linear; 
 
    -o-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-delay: 4.2s; 
 
    -moz-animation-delay: 4.2s; 
 
    -ms-animation-delay: 4.2s; 
 
    -o-animation-delay: 4.2s; 
 
    animation-delay: 4.2s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-iteration-count: infinite; 
 
    -ms-animation-iteration-count: infinite; 
 
    -o-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -ms-animation-fill-mode: forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.dragon-speech:nth-of-type(4){ 
 
    -webkit-animation-name: dragon-speech_animation; 
 
    -moz-animation-name: dragon-speech_animation; 
 
    -ms-animation-name: dragon-speech_animation; 
 
    -o-animation-name: dragon-speech_animation; 
 
    animation-name: dragon-speech_animation; 
 
    -webkit-animation-duration: 10s; 
 
    -moz-animation-duration: 10s; 
 
    -ms-animation-duration: 10s; 
 
    -o-animation-duration: 10s; 
 
    animation-duration: 10s; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-timing-function: linear; 
 
    -o-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-delay: 6.2s; 
 
    -moz-animation-delay: 6.2s; 
 
    -ms-animation-delay: 6.2s; 
 
    -o-animation-delay: 6.2s; 
 
    animation-delay: 6.2s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-iteration-count: infinite; 
 
    -ms-animation-iteration-count: infinite; 
 
    -o-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -ms-animation-fill-mode: forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.dragon-speech:nth-of-type(5){ 
 
    -webkit-animation-name: dragon-speech_animation; 
 
    -moz-animation-name: dragon-speech_animation; 
 
    -ms-animation-name: dragon-speech_animation; 
 
    -o-animation-name: dragon-speech_animation; 
 
    animation-name: dragon-speech_animation; 
 
    -webkit-animation-duration: 10s; 
 
    -moz-animation-duration: 10s; 
 
    -ms-animation-duration: 10s; 
 
    -o-animation-duration: 10s; 
 
    animation-duration: 10s; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-timing-function: linear; 
 
    -o-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-delay: 8.2s; 
 
    -moz-animation-delay: 8.2s; 
 
    -ms-animation-delay: 8.2s; 
 
    -o-animation-delay: 8.2s; 
 
    animation-delay: 8.2s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-iteration-count: infinite; 
 
    -ms-animation-iteration-count: infinite; 
 
    -o-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -ms-animation-fill-mode: forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 

 
}

<p class="dragon-speech">Муха!</p> 
 
<p class="dragon-speech">Муха бесит!</p> 
 
<p class="dragon-speech">Пришлепни!</p> 
 
<p class="dragon-speech">Придави ее!</p> 
 
<p class="dragon-speech">Муха!!!</p>

Answer 1

решаемые его. Правильно работает, если установить отрицательное значение на задержку анимации. Для каждого ": nth-of-type (n)" следующим образом:

animation-delay: -9.8s; 
animation-delay: -11.8s; 
animation-delay: -13.8s; 
animation-delay: -15.8s; 
animation-delay: -17.8s;