Why doesn't animation-delay work correctly on iPad, iPhone?

Question

css

good afternoon!
With the code below, I'm animating multiple elements with the same animation but with different delays. everywhere works fine, except for apple devices ... maybe someone knows why?
can be seen on the site stassabiomassa.com right on the main page (words flying out of the dragon's mouth).
Thank you!

<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

Add
Should help. (don't forget the vendor prefixes)