Почему не правильно работает animation-delay на iPad, iPhone?

Question

[yaroslavgrishajev]

добрый день!

c помощью кода ниже, я анимимрую несколько элементов с помощью одной анимации но с разными задержками. везде работает отлично, кроме яблочных девайсов... может кто-то знает почему?
можно увидеть на сайте stassabiomassa.com сразу на главной (слова, вылетающие изо рта дракона).
Спасибо!

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

.dragon-speech:nth-of-type(1){
    -webkit-animation: dragon-speech_animation 10s infinite linear;
       -moz-animation: dragon-speech_animation 10s infinite linear;
        -ms-animation: dragon-speech_animation 10s infinite linear;
            animation: dragon-speech_animation 10s infinite linear;
    -webkit-animation-delay: 0.2s;
       -moz-animation-delay: 0.2s;
        -ms-animation-delay: 0.2s;
            animation-delay: 0.2s;
}

.dragon-speech:nth-of-type(2){
    -webkit-animation: dragon-speech_animation 10s infinite linear;
       -moz-animation: dragon-speech_animation 10s infinite linear;
        -ms-animation: dragon-speech_animation 10s infinite linear;
            animation: dragon-speech_animation 10s infinite linear;   
    -webkit-animation-delay: 2.2s;
       -moz-animation-delay: 2.2s;
        -ms-animation-delay: 2.2s;
            animation-delay: 2.2s;
}

.dragon-speech:nth-of-type(3){
    -webkit-animation: dragon-speech_animation 10s infinite linear;
       -moz-animation: dragon-speech_animation 10s infinite linear;
        -ms-animation: dragon-speech_animation 10s infinite linear;
            animation: dragon-speech_animation 10s infinite linear;
     -webkit-animation-delay: 4.2s;
        -moz-animation-delay: 4.2s;
         -ms-animation-delay: 4.2s;
             animation-delay: 4.2s;

}

.dragon-speech:nth-of-type(4){
    -webkit-animation: dragon-speech_animation 10s infinite linear;
       -moz-animation: dragon-speech_animation 10s infinite linear;
        -ms-animation: dragon-speech_animation 10s infinite linear;
            animation: dragon-speech_animation 10s infinite linear;
    -webkit-animation-delay: 6.2s;
       -moz-animation-delay: 6.2s;
        -ms-animation-delay: 6.2s;
            animation-delay: 6.2s;

}

.dragon-speech:nth-of-type(5){
    -webkit-animation: dragon-speech_animation 10s infinite linear;
       -moz-animation: dragon-speech_animation 10s infinite linear;
        -ms-animation: dragon-speech_animation 10s infinite linear;
            animation: dragon-speech_animation 10s infinite linear;
    -webkit-animation-delay: 8.1s;
       -moz-animation-delay: 8.1s;
        -ms-animation-delay: 8.1s;
            animation-delay: 8.1s;

}

@-webkit-keyframes dragon-speech_animation {
        0% { -webkit-transform: translate3d(0,0,0) rotate(-30deg) scale(0);}
        1% { -webkit-transform: translate3d(-100px,30px,0) rotate(-30deg) scale(0.1);}
      	3% { -webkit-transform: translate3d(-300px, 100px, 0) rotate(-30deg) scale(1);}
        5% { -webkit-transform: translate3d(-300px, 100px, 0) rotate(-30deg) scale(1); }
        25% { -webkit-transform: translate3d(-200px, -50px, 0) rotate(-20deg) scale(1); }
        50% { -webkit-transform: translate3d(-300px, -150px, 0) rotate(20deg) scale(1); }
        75% { -webkit-transform: translate3d(-200px, -250, 0) rotate(-20deg) scale(1); opacity:1;}
        100% { -webkit-transform: translate3d(-300px, -350px, 0) rotate(-20deg) scale(1); opacity:0; }
}
@-moz-keyframes dragon-speech_animation {
	      0% { -moz-transform: translate3d(0,0,0) rotate(-20deg) scale(0); }
      	3% { -moz-transform: translate3d(-300px, 50px, 0) rotate(-20deg) scale(1); }
        5% { -moz-transform: translate3d(-300px, 50px, 0) rotate(-20deg) scale(1); }
        25% { -moz-transform: translate3d(-200px, -50px, 0) rotate(-20deg) scale(1); }
        50% { -moz-transform: translate3d(-300px, -150px, 0) rotate(20deg) scale(1); }
        75% { -moz-transform: translate3d(-200px, -250, 0) rotate(-20deg) scale(1); opacity:1; }
        100% { -moz-transform: translate3d(-300px, -350px, 0) rotate(-20deg) scale(1); opacity:0; }
}
@-o-keyframes dragon-speech_animation {
	      0% { -o-transform: translate3d(0,0,0) rotate(-20deg) scale(0); }
      	3% { -o-transform: translate3d(-300px, 50px, 0) rotate(-20deg) scale(1); }
        5% { -o-transform: translate3d(-300px, 50px, 0) rotate(-20deg) scale(1); }
        25% { -o-transform: translate3d(-200px, -50px, 0) rotate(-20deg) scale(1); }
        50% { -o-transform: translate3d(-300px, -150px, 0) rotate(20deg) scale(1); }
        75% { -o-transform: translate3d(-200px, -250, 0) rotate(-20deg) scale(1); opacity:1; }
        100% { -o-transform: translate3d(-300px, -350px, 0) rotate(-20deg) scale(1); opacity:0; }
}

@keyframes dragon-speech_animation {
	      0% { transform: translate3d(0,0,0) rotate(-20deg) scale(0); }
      	3% { transform: translate3d(-300px, 50px, 0) rotate(-20deg) scale(1); }
        5% { transform: translate3d(-300px, 50px, 0) rotate(-20deg) scale(1); }
        25% { transform: translate3d(-200px, -50px, 0) rotate(-20deg) scale(1); }
        50% { transform: translate3d(-300px, -150px, 0) rotate(20deg) scale(1); }
        75% { transform: translate3d(-200px, -250, 0) rotate(-20deg) scale(1); opacity:1; }
        100% { transform: translate3d(-300px, -350px, 0) rotate(-20deg) scale(1); opacity:0; }
}

Answer 1

[yaroslavgrishajev]

В общем, решил трабл! Видимо какой-то баг чисто iOS или еще что-то...
Все работает отлично, если сделать отрицательную задержку, ниже для каждого :nth-of-type(n):
animation-delay: -9.8s;
animation-delay: -11.8s;
animation-delay: -13.8s;
animation-delay: -15.8s;
animation-delay: -17.8s;

Answer 2

[Никита Баев]

Добавьте
animation-fill-mode: forwards

Должно помочь. (не забудьте про вендорные префиксы)

Comments

[yaroslavgrishajev]

спасибо, но не помогло...даже расписал все опции анимации по отдельности, не shorthand, и все равно никак