The code snippet below works perfectly in most environments, but I am facing an issue in iOS. I suspect the problem lies in the animation delay, as some paragraphs are being animated simultaneously. You can view a demo here (look for the words coming out of the left dragon's head).
Any insights on what might be causing this issue? Your help is greatly appreciated. Thank you!
.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){
/*same properties as above with different delay*/
}
.dragon-speech:nth-of-type(3){
/*same properties as above with different delay*/
}
.dragon-speech:nth-of-type(4){
/*same properties as above with different delay*/
}
.dragon-speech:nth-of-type(5){
/*same properties as above with different delay*/
}<p class="dragon-speech">Fly!</p>
<p class="dragon-speech">The fly is annoying!</p>
<p class="dragon-speech">Swat it!</p>
<p class="dragon-speech">Crush it!</p>
<p class="dragon-speech">Fly!!!</p>